[HTML][JavaScript][Computer Stuff][Freeing the Mind]

Iframes2

Nowadays, iframes are supported by major browser, although you have to test your code carefully to make sure it works. The code below works in the major browsers including Opera.

Here are some articles on iframes:

  1. Iframes
  2. Iframes: Opening menu items in an iframe (JavaScript) (This page)
  3. Iframes: Opening a page from one iframe in another.

Now, instead of opening new pages in the whole of the browser, you can browse some pages in the HTML tutorial while staying on this page. The first page is already loaded to get you started. Hyperlinks, within the pages, open in the iframe.

The area below is an iframe!

Here is the relevant code:

<!-- The code below is the JavaScript Code in the HEAD of this document that works the drop down menu-->

<script type="text/javascript">

<!--//

function goToPage763(mySelect)

{

PageIndex2=mySelect.selectedIndex;

{

if

(

mySelect.options[PageIndex2].value != "none"

)

{

//this is the key code in the JavaScript to open the new page in

//the iframe:-

frames['iframe2'].location.href = mySelect.options[PageIndex2].value;

}

}

}

//-->

</script>

<form name="form763">

<p>

<select name="select763" size="1" onchange="goToPage763(this.form.select763)">

<option value="none" selected="selected">

Select a page and go

</option>

<option value="anchors.htm">

What's in a name - Anchors

</option>

<option value="background_images.htm">

Background Images - Ken Ward's HTML Tutorial

</option>

<option value="Bold.htm">

Formatting - HTML Tutorial

</option>

<option value="buttons.htm">

Form Components - HTML Guide - Buttons, Text Area, Action, etc

</option>

<option value="CellProperties.htm">

Aligning Table Cells

</option>

<option value="Comments.htm">

HTML Comments

</option>

<option value="font.htm">

The Font Tag

</option>

<option value="form-post.htm">

Posting a form

</option>

<option value="forms.htm">

Forms

</option>

<option value="FormSelect.htm">

Menus in Forms

</option>

</select>

</p>

<p>

<!-- The code below is the code in the body of this document that writes the form-->

<iframe name="iframe2" src="index.html" align="top" height="100%" width="95%" hspace="10" vspace="10" align="middle">

If you can see this, your browser does not support iframes!

</iframe>

</p>

</form>

You can learn more about iframes - Opening a page from one iframe in another page.

Or continue with HTML:

See also basic stuff on  Iframes

[back to: no frames]
[home][contents]
[on to:   Forms]