Can I force a hard refresh on an iframe with JavaScript?

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() + '\">');

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.

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.