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

iframe, javascript, refresh

Solution

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.

Problem

Original source

Related problems

• How to refresh an IFrame using Javascript?
• How do we control web page caching, across all browsers?
• Iframe reload button
• What’s the best way to reload / refresh an iframe?