changing iframe src, what's the best way

[Joe Nine]

I want to change the src of an iframe using JavaScript and would like to
know what's the most reliable way.

There's either directly accessing the iframe's .src property or there's
using the setAttribute method. I've read good and bad things about both.

I'll only need to be doing this on the 21st century browsers (IE6+,
Firefox 2+, Safari 3+, Opera 9+ and Chrome). So issues with old browsers
like NS3, IE4 etc won't be an issue.

 

[Sean Kinsey]

I want to change the src of an iframe using JavaScript and would like to
know what's the most reliable way.

There's either directly accessing the iframe's .src property or there's
using the setAttribute method. I've read good and bad things about both.

I'll only need to be doing this on the 21st century browsers (IE6+,
Firefox 2+, Safari 3+, Opera 9+ and Chrome). So issues with old browsers
like NS3, IE4 etc won't be an issue.

Neither.
The src property is only used to set the initial url of the Iframe.
To set a new URL you use the iframes contentWindow
'iframeObj.contentWindow.location = foo;'

 

[Joe Nine]

Neither.
The src property is only used to set the initial url of the Iframe.
To set a new URL you use the iframes contentWindow
'iframeObj.contentWindow.location = foo;'

I should have specified that the iframe was created with no src property
in the iframe tag, so it's debatable whether what I'd be doing would
meet your classification of "initial url".

 

[Richard Cornford]

All Safari browsers, all Firefox browsers (and for that matter all
Gecko derived browsers) and opera versions from (at least) 6 on, are
"21st century browsers".

Neither.
The src property is only used to set the initial url of the Iframe.

Taking the question literally that is exactly what the OP asks to do.
The questionable sense in attempting that justifies dismissing it.
However, as the - src - property is specified in the W3C HTML DOM
standard and is not read only, if you wanted to set it then writing a
new value to the property of the IFRAME element object should be
acceptable (even if there are no technical reasons for expecting that
action to have useful consequences).

To set a new URL you use the iframes contentWindow
'iframeObj.contentWindow.location = foo;'

In the W3C HTML level 2 DOM standard the HTMLIFrameElement interface
does not have a - contentWidnow - property, only- contentDocument -.
Though I think all of the listed sub-set of "21st century browsers" do
have that property.

However, assigning to the - location - property of a window/frame
object is OK for windows/frames containing HTML documents (and some
other sorts) but I don't think you will find the property in, say,
window/frame objects that contain PDF document. Obviously that is not
an issue if the intention is never to attempt to navigate the frame to
any non-HTML documents.

The most general, cross-browser, method of navigating any frame
(including an IFRAME) with scripts is to arrange that the frame has
both ID and NAME attributes that hold the same value and then access
its window/frame object through the - frames - collection of the
containing window/frame object, using that NAME/ID i.e.:-

frames['exampleFrameName'].location = 'new URL';

or (if you like):-

window.frames['exampleFrameName'].location = 'new URL';

And that formulation has been effective on every browser that has
supported both javascript and frames/iframes (including those that do
not have - contentWindow - properties and those were assigning the to
- src - property of an IFRAME element did not result in navigation).
It is one of the very few 'one code fits all' browser scripting
options.

(Note, this is not using - document.frames - as that was never
universally supported in frame capable browsers, and that the use of
the - location - property imposes the same caveats for (at least some)
non-HTML documents as your suggestion.)

Richard.

 

[Joe Nine]

All Safari browsers, all Firefox browsers (and for that matter all
Gecko derived browsers) and opera versions from (at least) 6 on, are
"21st century browsers".

Neither.
The src property is only used to set the initial url of the Iframe.

Taking the question literally that is exactly what the OP asks to do.
The questionable sense in attempting that justifies dismissing it.
However, as the - src - property is specified in the W3C HTML DOM
standard and is not read only, if you wanted to set it then writing a
new value to the property of the IFRAME element object should be
acceptable (even if there are no technical reasons for expecting that
action to have useful consequences).

To set a new URL you use the iframes contentWindow
'iframeObj.contentWindow.location = foo;'

In the W3C HTML level 2 DOM standard the HTMLIFrameElement interface
does not have a - contentWidnow - property, only- contentDocument -.
Though I think all of the listed sub-set of "21st century browsers" do
have that property.

However, assigning to the - location - property of a window/frame
object is OK for windows/frames containing HTML documents (and some
other sorts) but I don't think you will find the property in, say,
window/frame objects that contain PDF document. Obviously that is not
an issue if the intention is never to attempt to navigate the frame to
any non-HTML documents.

The most general, cross-browser, method of navigating any frame
(including an IFRAME) with scripts is to arrange that the frame has
both ID and NAME attributes that hold the same value and then access
its window/frame object through the - frames - collection of the
containing window/frame object, using that NAME/ID i.e.:-

frames['exampleFrameName'].location = 'new URL';

or (if you like):-

window.frames['exampleFrameName'].location = 'new URL';

And that formulation has been effective on every browser that has
supported both javascript and frames/iframes (including those that do
not have - contentWindow - properties and those were assigning the to
- src - property of an IFRAME element did not result in navigation).
It is one of the very few 'one code fits all' browser scripting
options.

(Note, this is not using - document.frames - as that was never
universally supported in frame capable browsers, and that the use of
the - location - property imposes the same caveats for (at least some)
non-HTML documents as your suggestion.)

Richard.

Thanks Richard, I'll be going with this:

window.frames['exampleFrameName'].location = 'new URL';

Incidentally, the reason why I'm having to do this is because of a bug
in (at least) IE and Firefox (but not in Opera, Safari and Chrome).

If you construct your iframe URL using a query string that contains
dynamic run-time information (for whatever reason), when it comes to a
soft refresh of the page, instead of fully reloading that iframe (using
the new dynamic run-time information that makes up the URL of it) it
will simply reload it from cache.

Here is an example where a random number is passed into the iframe. The
iframe has code in it to document.write the number into it's page. This
example is not what I'm doing in the real world, it's constructed to
show the bug. It illustrates though that if you want to pass information
into your iframe and have the page in that iframe "do things" with that
information and use it to act differently, then IE and FF will stop that
from working when it comes to a regular soft refresh. Instead, they'll
repeat the error of loading the entire iframe contents from cache
(including sending the page the old cached query string).

Test stripped down index.html page:

<html><body>
<script>
var x=parseInt(Math.random()*100);
var query="?"+x;
var u="iframe.html";
document.write("Creating iframe with query number "+x+"<br>");
document.write("<iframe width=50 height=40 frameborder=1 scrolling=no
src='"+u+query+"'><\/iframe>");
</script>
</body></html>


Test stripped down iframe.html page:

<html><body>
<script>
var s=document.location.search.substring(1);
document.write(s);
</script>
</body></html>

 

[Dr J R Stockton]

I want to change the src of an iframe using JavaScript and would like
to know what's the most reliable way.

There's either directly accessing the iframe's .src property or there's
using the setAttribute method. I've read good and bad things about
both.

I'll only need to be doing this on the 21st century browsers (IE6+,
Firefox 2+, Safari 3+, Opera 9+ and Chrome). So issues with old
browsers like NS3, IE4 etc won't be an issue.

Setting src works for me in more-or-less current versions of those
browsers, and in IE8. See, for example, in
<URL:http://www.merlyn.demon.co.uk/js-grphx.htm> (seek .src).

MinTrue XP interactive, bug fix, see via sig.