Iframe src caching issue on firefox

Question

I have an iframe element with a random scr attribute. When I do refresh the page every time, the iframe should load the page with different query parameters based on the src att

Answer 1

All other answers doesn't work in my case. So I decided to solve the problem my creating the total iFrame dynamically with JavaScript like it is described in this answer:

<div id="dynamicload"></div>

<script type="text/javascript">
    var ifrm = document.createElement("iframe");
    ifrm.setAttribute("src", "http://localhost/test.php?rand_val=<?php echo $rand_val; ?>");
    ifrm.style.width = "500px";
    ifrm.style.height = "500px";
    document.getElementById("dynamicload").appendChild(ifrm);
</script>

Answer 2

Your code in PHP executes once and sends the content to the browser. When you refresh the page, the code doesn't run again in the server, because it is served by the cache. So the src of the iframe uses the same random number.

To avoid this you need to disable caching of the original page (not the iframe). Or you could have the random number generated in the client side (using javascript) so that is unique every time.

Answer 3

It's reported as a bug of firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=279048

one workaround is resetting the src of iframe: document.getElementById('iframe_id').src = 'target_url';

Still there will be two requests: the first request is wrong and cancelled immediately before the second request which is correct.

Answer 4

We had the same problem with firefox caching the iframe src and disabling the cache on the original page as well as the iframe page did not help. We put the following code (jQuery code) in the onload function of iframe:

$(parent.document).find("iframe").each(function() {
    // apply the logic only to the current iframe only
    if(this.contentDocument == window.document) {
       // if the href of the iframe is not same as 
       // the value of src attribute then reload it
      if(this.src != location.href) {
        this.src = this.src;
      }
    }
});