Refresh iFrame (Cache Issue)

20
votes

We are getting a weird issue on which we are not sure what exactly cause it. Let me elaborate the issue. Suppose, we have two different html pages a.html and b.html. And a little script written in index.html:

<html>

<head>
    <script>
    function reloadFrame(iframe, src) {
        iframe.src = src;
    }
    </script>
</head>

<body>
    <form>
        <iframe id="myFrame"></iframe>
        <input type="button" value="Load a.html" onclick="reloadFrame(document.getElementById('myFrame'), 'a.html')">
        <input type="button" value="Load b.html" onclick="reloadFrame(document.getElementById('myFrame'), 'b.html')">
    </form>
</body>

</html>

A server component is continuously updating both files a.html and b.html. The problem is the content of both files are successfully updating on the server side. If we open we can see the updated changes but client getting the older content which doesn't show the updated changes.

Any idea?

6
javascripthtmliframe

6 Answers

27
votes

Add this in a.html and b.html

<head>
    <meta http-Equiv="Cache-Control" Content="no-cache" />
    <meta http-Equiv="Pragma" Content="no-cache" />
    <meta http-Equiv="Expires" Content="0" />
</head>

To force no cache checks

12
votes

If you can add server-side instructions to those HTML files, you could send the appropriate headers to prevent caching:

Making sure a web page is not cached, across all browsers (I think the consensus is that the 2nd answer is best, not the accepted one)

Simone's answer already deals with Meta tags.

A cheap quick trick is to add a random number as a GET parameter:

page_1.html?time=102398405820

if this changes on every request (e.g. using the current time), reloading wil get forced every time, too.

9
votes

Try something like the following:

<script>
    var frameElement = document.getElementById("frame-id");
    frameElement.contentWindow.location.href = frameElement.src;
</script>

This will force the iframe to be reloaded even if it was cached by the browser

0
votes

Homero Barbosa's Solution worked like a charm. In my case, I had a varying number of iframes on the page, so I did the following: 

$('.some_selector').each(function () {
  var $randid = Math.floor(Math.random() * 101);
  $(this).attr({'id': 'goinOnaSafari-' + $randid});

  var $frame = document.getElementById('goinOnaSafari-' + $randid);
  $frame.contentWindow.location.href = $frame.src;
});
0
votes

I want to put Vishwas comment as a separate answer, extending Pekka’s answer

//ensure iframe is not cached
function reloadIframe(iframeId) {
    var iframe = document.getElementById(iframeId);
    var d = new Date();
    if (iframe) {
        iframe.src = iframe.src + '?ver=' + d.getTime();
        //alternatively frameElement.contentWindow.location.href = frameElement.src; //This will force the iframe to be reloaded even if it was cached by the browser
    }
}
reloadIframe('session_storage_check');
-1
votes

For one possible solution to this, pass a "cache parameter" to your calls to a.html and b.html. For example

HTML

<input type="button" value="Load a.html" onclick="cacheSafeReload('a.html');">

Javascript

function cacheSafeReload(urlBase) {
    var cacheParamValue = (new Date()).getTime();
    var url = urlBase + "?cache=" + cacheParamValue;
    reloadFrame(document.getElementById('myFrame'), url);
}