19

I've found many answers on Stack Overflow about how to refresh an iframe with JavaScript.

For example:

They work fine. However, if the page in the iframe has changed recently, the refresh will not show this change. Is there any way I can force a hard refresh on the designated iframe so that the new version is shown?

Community
  • 1
  • 1
jkupczak
  • 2,891
  • 8
  • 33
  • 55
  • I answer a similar question here: https://stackoverflow.com/questions/2064850/how-to-refresh-an-iframe-using-javascript/47395136#47395136 Good luck – pery mimon Nov 20 '17 at 15:12

3 Answers3

25

If the iframe is same-origin, you can force a full page reload using

iframe.contentWindow.location.reload(true);//The argument "true" will force all loaded resources, such as images, to be re-checked for expiry at the server

↪ View an example at jsFiddle

↪ More information at the Mozilla Developer wiki

If you have control over the HTTP headers sent for the page in the iframe, you can also instruct the browser not to cache it in the first place.
Furthermore, most web pages completely ignore parameters in the query string for which they have no handling code, so you could add a random value or a timestamp to the query string to make sure the browser sees it as a "new" page and does not use the cached copy: 
if(iframe.src.indexOf('timestamp') > -1){ // Check if we still have a timestamp in the URL from a previous refresh
  iframe.src = iframe.src.replace(/timestamp=[^&]+/, 'timestamp=' + Date.now()); // And if so, replace it instead of appending so the URL doesn't grow too long.
}else{ // Else we will append the timestamp
  iframe.src += (iframe.src.indexOf('?') > -1 ? "&" : "?") + 'timestamp=' + Date.now();// If the URL contains a ?, append &timestamp=...; otherwise, append ?timestamp=...
}

Use new Date().getTime() instead of Date.now() if support for older browsers is important.

user2428118
  • 7,935
  • 4
  • 45
  • 72
  • For some reason I can't get this to work on my site. Here's a test page I created. It doesn't even refresh the iframe at all. I added some CSS3 animation to make it easier to see when the page is reloaded. http://iavi.com/demo/signature/iframe.html – jkupczak Nov 20 '12 at 16:53
  • The JavaScript should be executed after the relevant elements have been created. You're trying to access DOM Nodes that don't exist yet. Try placing the ` – user2428118 Nov 20 '12 at 16:54
  • I had it that way first and it didn't work for me. Changed it back and it works now. I must have messed something else up. Works great now, thank you! – jkupczak Nov 20 '12 at 17:22
  • Simple solution and worked for me with Chrome ver 63.0 – Yogi Jan 24 '18 at 06:47
  • 1
    This is necessary if you want IE to refresh images on IFrames. Thank you. – Stephen May 02 '19 at 06:42
  • Adding the timestamp to the back of the url did the trick for me – mintedsky Apr 02 '20 at 23:18
11

Reload the iFrame with a URL, but give it a unique id...

var rand = Math.floor((Math.random()*1000000)+1);
var iframe = document.getElementById('youriframe');
iframe.src = "http://www.yourpage.com/yourpage.html?uid="+rand;

It would be easier to give you a solution if we could see the code that you currently have.

Hope it helped.

George
  • 36,413
  • 9
  • 66
  • 103
3

I struggled with this for ages. A lot of the methods mentioned above work if your iframe is on the same domain as your web page.

However if your iframe is from another domain these methods don't work (due to CORS policy).

Changing the src attribute kind of works, but doesn't result in a proper redraw of the iframe. This can be particularly evident if you're embedding a Google Map in your page with an iframe.

What I eventually discovered is that you need to:

1) Save the source attribute of the iframe

2) Remove the iframe from the DOM

3) Add a random query parameter to the end of the source attribute you saved in step 1.

4) Add an iframe back to the DOM (with the unique source attribute).

 //save the source of the iframe minus the unique identifier
    tempElementSrc = $('#the-iframe').attr('src').substring(0,$('#the-iframe').attr('src').lastIndexOf('&', $('#the-iframe').attr('src')));

  //remove the iframe
    $('#the-iframe').remove();

  //readd the iframe with the new source including random query string
  $('#container-id').append('<iframe width=\"100%\" id=\"iframe-id\" src=\"' + tempElementSrc + '&' + Date.now() + '\">');
John McAulay
  • 185
  • 9