Iframes

iframes are not supported by Netscape 4.

iframes inside layers are buggy in Opera 6 (solved in 7). Even outside layers, they can be very buggy in Opera 5 on Mac.

WebTV reloads the entire page when reloading an iframe.

Using 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 5 and 6.

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.

Frame or object?

The fundamental question is whether the iframe is seen as a frame or as an object.

In general browsers allow both views on 'real' (hard-coded) iframes, but generated iframes cannot be accessed as frames.

NAME attribute

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 Mozilla) 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.

Example

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.

Method Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.4 Safari 1.0 Opera 7.20
object + src
Test now
Yes Yes Yes Yes Yes Yes
I treat the iframe as if it were an object and change its src property:
document.getElementById('testiframe').src
object + location
Test now
No No No No No No
This is hybrid code, first I call the iframe as an object, then I treat it as a frame and use frame properties:
document.getElementById('testiframe').location.href
frame + location
Test now
Yes Yes Yes Yes Yes Yes
Now let’s treat the iframe as a frame.
frames['testiframe'].location.href

This works in all browsers, provided you give the iframe a name attribute.
frame + src
Test now
No No No No No No
I tried some more hybrid code
frames['testiframe'].src

This doesn’t work in any browser, but I thought I’d include the test anyway.

As you see browsers agree remarkably. Either you access the iframe as an object and change its src or you access the iframe as a frame and change its location.href.

The frame syntax is slightly preferable because Opera 6 supports it but not the object syntax.

Accessing the 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

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.

Accessing the parent

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.

Changing the page from the iframe itself

Using 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 5 and 6. 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 Mozilla.

Generated iframes

When you generate an iframe through the W3C DOM the iframe is never entered into the frames array, though, and the frames['testiframe'].location.href syntax will not work.

I found that switching to the document.getElementById('testiframe').src syntax works fine.

The target attribute of a link doesn't work either with generated iframes, except in Opera, even though I gave my generated iframe both a name and an id.

The lack of target support means that you must use JavaScript to change the content of a generated iframe, but since you need JavaScript anyway to generate it in the first place, I don't see this as much of a problem.

Second example

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>

Text size in iframes

A curious Explorer 6 only bug:

When you change the text size through the View menu, text sizes in iframes are correctly changed. However, this browser does not change the line breaks in the original text, so that part of the text may become invisible, or line breaks may occur while the line could still hold another word.