location.href
in an iframe to change the page in the iframe
does not work in Explorer 4 and 5.0 on Windows and Opera.
On this page I give a short overview of accessing iframes from the page they’re on. Not surprisingly, there are some browser considerations.
An iframe is an inline frame, a frame that, while containing a completely separate page with its own URL, is nonetheless placed inside another HTML page. This gives very nice possibilities in web design. The problem is to access the iframe, for instance to load a new page into it. This page explains how to do it.
The fundamental question is whether the iframe is seen as a frame or as an object.
top.frames[1].frames[2]
and such). Does the iframe
fit into this frame hierarchy?src
property? In that case we have to use a standard
DOM call (like document.getElementById('theiframe')
)
to access it.As you might have guessed, the answer depends on the browser. But it also depends on which attributes you assign to the iframe.
The most important rule is to give any iframe you create a name
attribute,
even if you also use an id
.
<iframe src="iframe_page1.html" id="testiframe" name="testiframe"></iframe>
Most browsers need the name
attribute to make the iframe part of the frame hierarchy.
Some browsers (notably Netscape 6) need the id
to make the iframe accessible as an
object. By assigning both attributes to the iframe you keep your options open. But name
is far more important than id
.
I want to change the source of the test iframe below so that it toggles between page 1 and page 2. I tried four lines of code.
src
property:id
.
Opera 6 doesn’t support this, though 7 does.name
attribute. If you
don’t use this attribute, the code still works in Explorer and WebTV.name
attribute.For comparision, here’s the same test with an iframe without a
name
. Note that you may have to click twice on the link of your choice to get the
iframe to do something; both examples use the same variable to keep track of which page should be loaded
into the iframe.
<iframe src="iframe_page1.html" id="testiframe2"></iframe>
So for a complete cross–browser experience you should give the iframe a
name
and use the
frames['testiframe'].location.href
syntax. As far as I know this always works.
Accessing the document inside the iframe is quite simple, provided you use the name
attribute. To count the number of links in the document in the iframe, do
frames['testiframe'].document.links.length.
Just like with real frames, parent
works from the iframe in all browsers: it accesses
the parent window (ie. the window in which the iframe is defined). Try the link in page 1 in the
iframe for a test.
location.href
in an iframe to change the page in the iframe
does not work in Explorer 4 and 5.0 on Windows and Opera 6.Now we come to a surprisingly difficult part: changing the page in the iframe from the iframe itself. Simple links work:
<a href="iframe_page1.html">normal link</a>
However, suppose you have to do it through JavaScript. The normal way is
location.href ='iframe_page1.html'
But when you do this from an iframe, it doesn’t work in Explorer 4.0 and 5.0 on Windows and Opera!
A simple alert(location.href)
works fine: it shows the URL of the current
page. But changing the location.href
has no effect whatsoever. This is obviously
a bug.
Changing location.href
works fine in Explorer on Mac, Explorer 5.5+ on Windows and Netscape 6.