By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,712 Members | 2,116 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,712 IT Pros & Developers. It's quick & easy.

loading a page in an inline frame

P: n/a
Hi
I have a code which works ok, except I would like to load the specified file
in an inline frame (I1) on the page instead of a whole new page if at all
possible - any help appreciated!
Here is the function in the <head>;

<script type="text/javascript">

function go()
{
location=document.forms[0].PropPage.value
}

</script>

.....and the code (form) which calls the function later on the page;

<form>
<p align="center">
<select id="PropPage" onchange="go()">
<option>-Select Property Type-
<option value="fincas.htm">Fincas
<option value="villas.htm">Villas
<option value="semidetached.htm">Semi-detached
<option value="apartments.htm">Apartments
<option value="plots.htm">Land plots
<option value="newdevelopments.htm">New Developments
</select>

Thanks in advance

Stumpy
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
"StumpY" <st********************@hotmail.com> wrote in message
news:Bu****************@news-binary.blueyonder.co.uk...
I have a code which works ok, except I would like to load the
specified file in an inline frame (I1) on the page instead of
a whole new page if at all possible - any help appreciated!
Here is the function in the <head>;

<script type="text/javascript">

function go()
{
location=document.forms[0].PropPage.value
Unqualified "location" will be resolved as the location property in the
current global object (the window or frame on web browsers), if it
exists. To navigate an IFRAME with this type of statement you need to
assign the URL string to the location property in the IFRAME's global
object. The IFRAME's global object (window/frame) should be found in the
frames collection of the current window, either as a named property if
the IFRAME has a name attribute (or, an ID attribute, but not on so many
browsers), or as a numerically indexed property. So the location object
of the IFRAME may be referred to as:-

frames['iframeName'].location

frames[0].location

-for example (adjusting names/numbers to suite the context of the HTML
in use).

The value property of a SELECT element is not necessarily the best way
of getting the value of the currently selected option. It works on most
modern browsers (and is W3C HTML DOM specified) but the most reliable
method of reading the value of the selected option is to use the
selectedIndex property of the SELECT element to index its options
collection and read the value property of the option that is selected
directly:-

var sel = document.forms[0].PropPage;
if(sel.selectedIndex >= 0){ // -1 means no selection.
frames['iframeName'].location = sel.options[sel.selectedIndex].value;
}
}

</script>

....and the code (form) which calls the function later on
the page;
<form>
<p align="center">
<select id="PropPage" onchange="go()">
Have you tested this with keyboard navigation of the SELECT element?
Probably not, when you do so you might see a need to re-consider the use
of the onchange event, probably a separate "Go" button to actually do
the navigation would be better (or maybe a re-think of the whole idea
and the replacement of this SELECT element with a list of links
targeting the IFRAME)
<option>-Select Property Type-
This OPTION element has no value attribute, no associated URL. So, if it
is re-selected it will encourage the IFRAME to load a non-existent
resource. As this option has the index zero as slight modification to
the safety check I proposed above would avoid this option attempting to
navigate the IFRAME:-

if(sel.selectedIndex > 0){ //not -1 or zero.
...
<option value="fincas.htm">Fincas
<option value="villas.htm">Villas
<option value="semidetached.htm">Semi-detached
<option value="apartments.htm">Apartments
<option value="plots.htm">Land plots
<option value="newdevelopments.htm">New Developments
</select>


Also, none of this is going to work at all if the user has JavaScript
disabled or unavailable on their browser. That produces a dependency on
JavaScript that is not necessitated by the apparent desired behaviour of
this page.

Richard.
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.