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

85,780
21
159
179

answered Mar 26 '10 at 15:42

Simone Margaritelli

4,584
10
45
70

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 12 · Answer 2 · edited May 23 '17 at 12:18

12

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

442,112
142
972
1,088

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
1

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 10 · Answer 3 · answered Jul 02 '12 at 19:11

10

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,442
5
26
33

2

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

score 4 · Answer 4 · answered Jun 05 '21 at 03:33

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

score 0 · Answer 5 · 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 0 · Answer 6 · answered Feb 18 '22 at 11:26

I could not get the HTML to work.

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

For development in chrome I checked the console Network tab and found where the iframe is loaded. I confirmed that it was loaded with a 304 response wich means it loads from cache. Right click -> clear browser cache.

Will not work in production, but at least helps with development.

score -1 · Answer 7 · 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)

7 Answers7

Linked