I have a web page in which I am trying to refresh a iFrame. I'm trying to do it with something like a <input /> button and javascript. I can't seem to get the iFrame to reload without clearing the cache. Getting PHP to clear the cache would be even better.

EDIT-UPDATE

Here's the working implementation inline.

    <input type="button"  onClick="javascript: var iFrame = document.getElementById('compilePreview'); iFrame.src = '<? echo ($myFile); ?>?random=' + (new Date()).getTime() + Math.floor(Math.random() * 1000000);" value="Reload Preview" />
    <iframe id="compilePreview" src="<? echo ($myFile); ?>" width="940"></iframe>

And of coarse the onload was soon to follow, eliminating the need for the button.

    <script>
    window.onload=refreshIframe;
    function refreshIframe(){
    var iFrame = document.getElementById('compilePreview');
    iFrame.src = '<? echo ($myFile); ?>?random=' + (new Date()).getTime() + Math.floor(Math.random() * 1000000);
    }
    </script>

I have a web page in which I am trying to refresh a iFrame. I'm trying to do it with something like a <input /> button and javascript. I can't seem to get the iFrame to reload without clearing the cache. Getting PHP to clear the cache would be even better.

EDIT-UPDATE

Here's the working implementation inline.

    <input type="button"  onClick="javascript: var iFrame = document.getElementById('compilePreview'); iFrame.src = '<? echo ($myFile); ?>?random=' + (new Date()).getTime() + Math.floor(Math.random() * 1000000);" value="Reload Preview" />
    <iframe id="compilePreview" src="<? echo ($myFile); ?>" width="940"></iframe>

And of coarse the onload was soon to follow, eliminating the need for the button.

    <script>
    window.onload=refreshIframe;
    function refreshIframe(){
    var iFrame = document.getElementById('compilePreview');
    iFrame.src = '<? echo ($myFile); ?>?random=' + (new Date()).getTime() + Math.floor(Math.random() * 1000000);
    }
    </script>

• php
• javascript
• html

• Can you show the exact method of how you're trying to reload the iframe? – Lee Taylor Commented Aug 27, 2012 at 2:18
• can you add a cache buster to the end of the URL of the iframe? something like url + "?ts=" + new Date().getTime() – olore Commented Aug 27, 2012 at 2:21
• Yes, had a brain fart on implementation. Running now, thanks to jfriend00 for getting the gears grinding. – Jarrett Mattson Commented Aug 27, 2012 at 4:08

3 Answers 3

The first choice is probably to control browser caching for the iframe page from your web server either with HTTP headers or with <meta> tags (see reference).

<meta HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<meta HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">

If you can't change those, then you can set a .src in the iframe that has a different query parameter each time to go around caching.

For example:

iframeObj.src = "http://www.example.com/page/myframe.html?random=" + (new Date()).getTime() + Math.floor(Math.random() * 1000000);

This is something you should do on the server side, controlled via HTTP headers like so:

<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sun, 29 Jul 2012 00:00:00 GMT"); // some day in the past

You could do something like

<iframe src="<?php echo $url.'#nocache'.time(); ?>">
#document</iframe>

Which would allow for GET parameters in the URL without also having to worry about whether to use ? or & for your random.