Refresh iFrame (Cache Issue)

Question

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?

score 27 · Accepted Answer · edited May 26 '15 at 13:05

27

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

edited May 26 '15 at 13:05

Tushar

78,625
15
134
154

answered Mar 26 '10 at 15:42

Simone Margaritelli

4,234
8
43
69

3

@Ben - there is nothing to suggest XHTML is being used in this question. For example, the inputs do not have closing tags either. – Fenton Jan 27 '12 at 15:51
This solution don't work for me, please check [this question](http://stackoverflow.com/questions/22451674/wrong-content-when-refresh-a-page-contains-iframes-in-ie) – dencey Mar 18 '14 at 02:58

score 11 · Answer 2 · edited May 23 '17 at 12:18

11

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.

edited May 23 '17 at 12:18

Community

1
1

answered Mar 26 '10 at 15:44

Pekka

418,526
129
929
1,058

A caveat with a naive implementation of the random number trick is that you can end up with urls like `"page_1.html?time=123?time=456?time=789?time=012"` on repeated invocations. Harmless, but ugly IMHO. – Crescent Fresh Mar 26 '10 at 15:59
Here is adding time to iframe.src in javascript. function reloadIframe() { var iframe = document.getElementById('iframeId'); var d = new Date(); iframe.src = iframe.src + "?"+ d.getTime(); } – Vishwas Dec 15 '20 at 06:34

score 9 · Answer 3 · answered Jul 02 '12 at 19:11

9

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

answered Jul 02 '12 at 19:11

HoBa

3,035
5
23
29

2

Is that documented anywhere? – Red Taz Nov 29 '12 at 11:30

score 0 · Answer 4 · answered Jan 16 '14 at 16:00

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;
});

score -1 · Answer 5 · edited Apr 28 '18 at 12:32

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);
}

Refresh iFrame (Cache Issue)

5 Answers5

Linked