javascriptiframerefresh

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

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?

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.