changing iframe src, what's the best way
in [JavaScript]
|
From: Joe Nine on 27 Apr 2010 05:29 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.
From: Sean Kinsey on 27 Apr 2010 06:02 On Apr 27, 11:29 am, Joe Nine <j...(a)yahoo.com> wrote: > 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;'
From: Joe Nine on 27 Apr 2010 06:47 Sean Kinsey wrote: > On Apr 27, 11:29 am, Joe Nine <j...(a)yahoo.com> wrote: >> 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;' 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".
From: Richard Cornford on 27 Apr 2010 06:51 On Apr 27, 11:02 am, Sean Kinsey wrote: > On Apr 27, 11:29 am, Joe Nine wrote: > >> 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). 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". >> 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. 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.
From: Joe Nine on 27 Apr 2010 10:33
Richard Cornford wrote: > On Apr 27, 11:02 am, Sean Kinsey wrote: >> On Apr 27, 11:29 am, Joe Nine wrote: >> >>> 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). > > 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". > >>> 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. > > 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> |