6

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>
3
  • Can you show the exact method of how you're trying to reload the iframe?
    – Lee Taylor
    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
    Aug 27, 2012 at 2:21
  • Yes, had a brain fart on implementation. Running now, thanks to jfriend00 for getting the gears grinding. Aug 27, 2012 at 4:08

3 Answers 3

17

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);
5
  • 1
    I have small doubt in this. if we are doing like this, page will not be cached at any point, so it will lead to the higher loading time, is there any method to clear the cache only when the page get expires? Oct 14, 2014 at 5:42
  • @Thirumalaimurugan - you can set a specific expiration time either in the HTML or in the HTTP headers from the server. Page caching strategy is an involved topic that isn't going to be explained in a comment here.
    – jfriend00
    Oct 14, 2014 at 5:52
  • Random url is not good method. It can cause redundant pages in Search Engines.
    – Bhavesh G
    Dec 2, 2015 at 9:05
  • What about for situations where scripts are not allowed?
    – Sean Halls
    Sep 30, 2020 at 22:00
  • @SeanHalls - Well, the whole premise of the question was a refresh action triggered by a piece Javascript so obviously Javascript has to be running for that scenario. If you have a different scenario that does not involve Javascript, then please write your own question and describe that specific scenario. If you want me to look at the new question, you can drop a link to it in a comment here.
    – jfriend00
    Sep 30, 2020 at 23:56
2

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
1
  • 1
    Tried it, but the iFrame is in a child page. Also tried after the html file gets compiled. Still have to press my "Refresh Preview" button, thanks to jfriend00. Appreciated anyways. Aug 27, 2012 at 4:05
1

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.

1
  • the part after # isn't sent to the server so I don't think it'll influence the caching Sep 14, 2015 at 21:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.