What s the best way to reload refresh an iframe

Question

I would like to reload an  lt iframe gt  using JavaScript  The best way I found until now was set the iframe   s src attribute to itself  but this isn   t very clean  Any ideas

User · Answer

Using self location reload   will reload the iframe    x000D   x000D   lt iframe src  https   vivekkumar11432 wordpress com   width  300  height  300  gt  lt  iframe gt  x000D   lt br gt  lt br gt  x000D   lt input type  button  value  Reload   onclick  self location reload       gt  x000D   x000D   x000D

User · Answer

Now to make this work on chrome 66  try this   const reloadIframe    iframeId    gt        const el   document getElementById iframeId      const src   el src     el src          setTimeout      gt            el src   src

User · Answer

document getElementById  some frame id   contentWindow location reload      be careful  in Firefox  window frames   cannot be indexed by id  but by name or index

User · Answer

window frames  frameNameOrIndex   location reload

User · Answer

document getElementById  iframeid   src   document getElementById  iframeid   src   It will reload the iframe  even across domains  Tested with IE7 8  Firefox and Chrome

User · Answer

Another solution   const frame   document getElementById  my-iframe     frame parentNode replaceChild frame cloneNode    frame

User · Answer

If you tried all of the other suggestions  and couldn t get any of them to work  like I couldn t   here s something you can try that may be useful   HTML   lt a class  refresh-this-frame  rel   iframe-id-0  gt Refresh lt  a gt   lt iframe src    id  iframe-id-0  gt  lt  iframe gt    JS      refresh-this-frame   click function         var thisIframe     this  attr  rel        var currentState     thisIframe  attr  src        function removeSrc               thisIframe  attr  src                  setTimeout  removeSrc  100       function replaceSrc               thisIframe  attr  src   currentState             setTimeout  replaceSrc  200           I initially set out to try and save some time with RWD and cross-browser testing  I wanted to create a quick page that housed a bunch of iframes  organized into groups that I would show hide at will  Logically you d want to be able to easily and quickly refresh any given frame   I should note that the project I am working on currently  the one in use in this test-bed  is a one-page site with indexed locations  e g  index html home   That may have had something to do with why I couldn t get any of the other solutions to refresh my particular frame   Having said that  I know it s not the cleanest thing in the world  but it works for my purposes  Hope this helps someone  Now if only I could figure out how to keep the iframe from scrolling the parent page each time there s animation inside iframe     EDIT  I realized that this doesn t  refresh  the iframe like I d hoped it would  It will reload the iframe s initial source though  Still can t figure out why I couldn t get any of the other options to work    UPDATE  The reason I couldn t get any of the other methods to work is because I was testing them in Chrome  and Chrome won t allow you to access an iframe s content  Explanation  Is it likely that future releases of Chrome support contentWindow contentDocument when iFrame loads a local html file from local html file   if it doesn t originate from the same location  so far as I understand it   Upon further testing  I can t access contentWindow in FF either   AMENDED JS      refresh-this-frame   click function         var targetID     this  attr  rel        var targetSrc     targetID  attr  src        var cleanID   targetID replace                   var chromeTest     navigator userAgent match  Chrome g    true   false        var FFTest     navigator userAgent match  Firefox g    true   false              if  chromeTest    true            function removeSrc                   targetID  attr  src                          setTimeout  removeSrc  100           function replaceSrc                   targetID  attr  src   targetSrc                     setTimeout  replaceSrc  200             if  FFTest    true            function removeSrc                   targetID  attr  src                          setTimeout  removeSrc  100           function replaceSrc                   targetID  attr  src   targetSrc                     setTimeout  replaceSrc  200                    if  chromeTest    false  amp  amp  FFTest    false            var targetLoc    document getElementById cleanID  contentWindow location  toString            function removeSrc                   targetID  attr  src                          setTimeout  removeSrc  100           function replaceSrc2                   targetID  attr  src   targetLoc                     setTimeout  replaceSrc2  200

User · Answer

document getElementById  some frame id   contentWindow location reload      be careful  in Firefox  window frames   cannot be indexed by id  but by name or index

User · Answer

I ve just come up against this in chrome and the only thing that worked was removing and replacing the iframe  Example       iframe wrapper   find  iframe   remove    var iframe       lt iframe src      src      frameborder  0  gt  lt  iframe gt       find   iframe wrapper   append iframe     Pretty simple  not covered in the other answers

User · Answer

document getElementById  iframeid   src   document getElementById  iframeid   src   It will reload the iframe  even across domains  Tested with IE7 8  Firefox and Chrome

User · Answer

document getElementById  some frame id   contentWindow location reload      be careful  in Firefox  window frames   cannot be indexed by id  but by name or index

User · Answer

I ve just come up against this in chrome and the only thing that worked was removing and replacing the iframe  Example       iframe wrapper   find  iframe   remove    var iframe       lt iframe src      src      frameborder  0  gt  lt  iframe gt       find   iframe wrapper   append iframe     Pretty simple  not covered in the other answers

User · Answer

If you using Jquery then there is one line code       iframeID  window parent document  attr  src      iframeID  window parent document  attr  src       and if you are working with same parent then      iframeID  parent document  attr  src      iframeID  parent document  attr  src

User · Answer

A refinement on yajra s post     I like the thought  but hate the idea of browser detection   I rather take ppk s view of using object detection instead of browser detection    http   www quirksmode org js support html   because then you re actually testing the capabilities of the browser and acting accordingly  rather than what you think the browser is capable of at that time   Also doesn t require so much ugly browser ID string parsing  and doesn t exclude perfectly capable browsers of which you know nothing about   So  instead of looking at navigator AppName  why not do something like this  actually testing for the elements you use    You could use try    blocks if you want to get even fancier  but this worked for me    function reload message frame         var frame id    live message frame       if window document getElementById frame id  location               window document getElementById frame id  location reload true         else if  window document getElementById frame id  contentWindow location             window document getElementById frame id  contentWindow location reload true         else if  window document getElementById frame id  src           window document getElementById frame id  src   window document getElementById frame id  src        else              fail condition  respond as appropriate  or do nothing         alert  Sorry  unable to reload that frame               This way  you can go try as many different permutations as you like or is necessary   without causing javascript errors  and do something sensible if all else fails  It s a little more work to test for your objects before using them  but  IMO  makes for better and more failsafe code   Worked for me in IE8  Firefox  15 0 1   Chrome  21 0 1180 89 m   and Opera  12 0 2  on Windows   Maybe I could do even better by actually testing for the reload function  but that s enough for me right now

User · Answer

document getElementById  some frame id   contentWindow location reload      be careful  in Firefox  window frames   cannot be indexed by id  but by name or index

User · Answer

window frames  frameNameOrIndex   location reload

User · Answer

For debugging purposes one could open the console  change the execution context to the frame that he wants refreshed  and do document location reload

User · Answer

A refinement on yajra s post     I like the thought  but hate the idea of browser detection   I rather take ppk s view of using object detection instead of browser detection    http   www quirksmode org js support html   because then you re actually testing the capabilities of the browser and acting accordingly  rather than what you think the browser is capable of at that time   Also doesn t require so much ugly browser ID string parsing  and doesn t exclude perfectly capable browsers of which you know nothing about   So  instead of looking at navigator AppName  why not do something like this  actually testing for the elements you use    You could use try    blocks if you want to get even fancier  but this worked for me    function reload message frame         var frame id    live message frame       if window document getElementById frame id  location               window document getElementById frame id  location reload true         else if  window document getElementById frame id  contentWindow location             window document getElementById frame id  contentWindow location reload true         else if  window document getElementById frame id  src           window document getElementById frame id  src   window document getElementById frame id  src        else              fail condition  respond as appropriate  or do nothing         alert  Sorry  unable to reload that frame               This way  you can go try as many different permutations as you like or is necessary   without causing javascript errors  and do something sensible if all else fails  It s a little more work to test for your objects before using them  but  IMO  makes for better and more failsafe code   Worked for me in IE8  Firefox  15 0 1   Chrome  21 0 1180 89 m   and Opera  12 0 2  on Windows   Maybe I could do even better by actually testing for the reload function  but that s enough for me right now

User · Answer

In IE8 using  Net  setting the iframe src for the first time is ok  but setting the iframe src for the second time is not raising the page load of the iframed page  To solve it i used iframe contentDocument location href    NewUrl htm    Discover it when used jQuery thickBox and tried to reopen same page in the thickbox iframe  Then it just showed the earlier page that was opened

User · Answer

window frames  frameNameOrIndex   location reload

User · Answer

window frames  frameNameOrIndex   location reload

User · Answer

If you using Jquery then there is one line code       iframeID  window parent document  attr  src      iframeID  window parent document  attr  src       and if you are working with same parent then      iframeID  parent document  attr  src      iframeID  parent document  attr  src

User · Answer

Because of the same origin policy  this won t work when modifying an iframe pointing to a different domain   If you can target newer browsers  consider using HTML5 s Cross-document messaging   You view the browsers that support this feature here  http   caniuse com  feat x-doc-messaging   If you can t use HTML5 functionality  then you can follow the tricks outlined here  http   softwareas com cross-domain-communication-with-iframes   That blog entry also does a good job of defining the problem

User · Answer

Use reload for IE and set src for other browsers   reload does not work on FF  tested on IE 7 8 9 and Firefox  if navigator appName     Microsoft Internet Explorer        window document getElementById  iframeId   contentWindow location reload true    else       window document getElementById  iframeId   src   window document getElementById  iframeId   src

User · Answer

for new url   location assign  http google com      The assign   method loads a new document   reload  location reload      The reload   method is used to reload the current document

User · Answer

If all of the above doesn t work for you   window location reload      This for some reason refreshed my iframe instead of the whole script  Maybe because it is placed in the frame itself  while all those getElemntById solutions work when you try to refresh a frame from another frame   Or I don t understand this fully and talk gibberish  anyways this worked for me like a charm

User · Answer

lt script type  text javascript  gt    top frames  DetailFrame   location   top frames  DetailFrame   location   lt  script gt

User · Answer

Simply replacing the src attribute of the iframe element was not satisfactory in my case because one would see the old content until the new page is loaded  This works better if you want to give instant visual feedback   var url   iframeEl src  iframeEl src    about blank   setTimeout function         iframeEl src   url     10

User · Answer

Have you considered appending to the url a meaningless query string parameter    lt iframe src  myBaseURL com something     gt    lt script gt  var i   document getElementsById  iframe   0       src   i src      number   1     For an update i src   src     ignoreMe     number  number     lt  script gt    It won t be seen  amp  if you are aware of the parameter being safe then it should be fine

User · Answer

If you tried all of the other suggestions  and couldn t get any of them to work  like I couldn t   here s something you can try that may be useful   HTML   lt a class  refresh-this-frame  rel   iframe-id-0  gt Refresh lt  a gt   lt iframe src    id  iframe-id-0  gt  lt  iframe gt    JS      refresh-this-frame   click function         var thisIframe     this  attr  rel        var currentState     thisIframe  attr  src        function removeSrc               thisIframe  attr  src                  setTimeout  removeSrc  100       function replaceSrc               thisIframe  attr  src   currentState             setTimeout  replaceSrc  200           I initially set out to try and save some time with RWD and cross-browser testing  I wanted to create a quick page that housed a bunch of iframes  organized into groups that I would show hide at will  Logically you d want to be able to easily and quickly refresh any given frame   I should note that the project I am working on currently  the one in use in this test-bed  is a one-page site with indexed locations  e g  index html home   That may have had something to do with why I couldn t get any of the other solutions to refresh my particular frame   Having said that  I know it s not the cleanest thing in the world  but it works for my purposes  Hope this helps someone  Now if only I could figure out how to keep the iframe from scrolling the parent page each time there s animation inside iframe     EDIT  I realized that this doesn t  refresh  the iframe like I d hoped it would  It will reload the iframe s initial source though  Still can t figure out why I couldn t get any of the other options to work    UPDATE  The reason I couldn t get any of the other methods to work is because I was testing them in Chrome  and Chrome won t allow you to access an iframe s content  Explanation  Is it likely that future releases of Chrome support contentWindow contentDocument when iFrame loads a local html file from local html file   if it doesn t originate from the same location  so far as I understand it   Upon further testing  I can t access contentWindow in FF either   AMENDED JS      refresh-this-frame   click function         var targetID     this  attr  rel        var targetSrc     targetID  attr  src        var cleanID   targetID replace                   var chromeTest     navigator userAgent match  Chrome g    true   false        var FFTest     navigator userAgent match  Firefox g    true   false              if  chromeTest    true            function removeSrc                   targetID  attr  src                          setTimeout  removeSrc  100           function replaceSrc                   targetID  attr  src   targetSrc                     setTimeout  replaceSrc  200             if  FFTest    true            function removeSrc                   targetID  attr  src                          setTimeout  removeSrc  100           function replaceSrc                   targetID  attr  src   targetSrc                     setTimeout  replaceSrc  200                    if  chromeTest    false  amp  amp  FFTest    false            var targetLoc    document getElementById cleanID  contentWindow location  toString            function removeSrc                   targetID  attr  src                          setTimeout  removeSrc  100           function replaceSrc2                   targetID  attr  src   targetLoc                     setTimeout  replaceSrc2  200

User · Answer

lt script type  text javascript  gt    top frames  DetailFrame   location   top frames  DetailFrame   location   lt  script gt

User · Answer

Another solution   const frame   document getElementById  my-iframe     frame parentNode replaceChild frame cloneNode    frame

User · Answer

Have you considered appending to the url a meaningless query string parameter    lt iframe src  myBaseURL com something     gt    lt script gt  var i   document getElementsById  iframe   0       src   i src      number   1     For an update i src   src     ignoreMe     number  number     lt  script gt    It won t be seen  amp  if you are aware of the parameter being safe then it should be fine

User · Answer

for new url   location assign  http google com      The assign   method loads a new document   reload  location reload      The reload   method is used to reload the current document

User · Answer

If all of the above doesn t work for you   window location reload      This for some reason refreshed my iframe instead of the whole script  Maybe because it is placed in the frame itself  while all those getElemntById solutions work when you try to refresh a frame from another frame   Or I don t understand this fully and talk gibberish  anyways this worked for me like a charm

User · Answer

Using self location reload   will reload the iframe    x000D   x000D   lt iframe src  https   vivekkumar11432 wordpress com   width  300  height  300  gt  lt  iframe gt  x000D   lt br gt  lt br gt  x000D   lt input type  button  value  Reload   onclick  self location reload       gt  x000D   x000D   x000D

User · Answer

Add empty space also reload the iFrame automatically    document getElementById  id   src

User · Answer

If using jQuery  this seems to work       your iframe   attr  src       your iframe   attr  src       I hope it s not too ugly for stackoverflow

User · Answer

Now to make this work on chrome 66  try this   const reloadIframe    iframeId    gt        const el   document getElementById iframeId      const src   el src     el src          setTimeout      gt            el src   src

User · Answer

Simply replacing the src attribute of the iframe element was not satisfactory in my case because one would see the old content until the new page is loaded  This works better if you want to give instant visual feedback   var url   iframeEl src  iframeEl src    about blank   setTimeout function         iframeEl src   url     10

User · Answer

If using jQuery  this seems to work       your iframe   attr  src       your iframe   attr  src       I hope it s not too ugly for stackoverflow

User · Answer

Because of the same origin policy  this won t work when modifying an iframe pointing to a different domain   If you can target newer browsers  consider using HTML5 s Cross-document messaging   You view the browsers that support this feature here  http   caniuse com  feat x-doc-messaging   If you can t use HTML5 functionality  then you can follow the tricks outlined here  http   softwareas com cross-domain-communication-with-iframes   That blog entry also does a good job of defining the problem

User · Answer

Add empty space also reload the iFrame automatically    document getElementById  id   src

User · Answer

Use reload for IE and set src for other browsers   reload does not work on FF  tested on IE 7 8 9 and Firefox  if navigator appName     Microsoft Internet Explorer        window document getElementById  iframeId   contentWindow location reload true    else       window document getElementById  iframeId   src   window document getElementById  iframeId   src

User · Answer

In IE8 using  Net  setting the iframe src for the first time is ok  but setting the iframe src for the second time is not raising the page load of the iframed page  To solve it i used iframe contentDocument location href    NewUrl htm    Discover it when used jQuery thickBox and tried to reopen same page in the thickbox iframe  Then it just showed the earlier page that was opened

User · Answer

For debugging purposes one could open the console  change the execution context to the frame that he wants refreshed  and do document location reload

[javascript] What’s the best way to reload / refresh an iframe?

Examples related to javascript

Examples related to iframe