loading a page in an inline frame

StumpY · Dec 3, 2003

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

Richard Cornford · Dec 4, 2003

StumpY said:
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.

Add Image and label dynamically inside the dropdown	2	Mar 11, 2022
How do I get the if statement correct in the lines that has it in the program?	2	Mar 16, 2023
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated	1	Aug 29, 2023
How to display input options only after selecting an option from the 'select class' tag JS?	6	May 12, 2023
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Javascrip code wont run properly.	2	Oct 2, 2022
Help with my responsive home page	2	Dec 14, 2022
Image shifts to the right when export the page to pdf	4	May 5, 2023

loading a page in an inline frame

StumpY

Richard Cornford

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads