Why doesn't iframe and/or innerHTML of a div always contain the source html of the iframe at time of generation?

Question

Sometimes when this script executes on a page, especially if it is the first time the browser loads the page, the contents of the iframe will show the page at test.html but it will be an older page that is missing some changes that the actual test.html when loaded manually from the directory does contain. Every time setInterval() runs, the contents of the iframe will still be outdated.

If the whole page is refreshed, say by clicking the refresh button, the contents of the iframe will be updated and setInterval() will cause the iframe to show the current test.html. However, it seems like given enough time setInterval() will sometimes stop loading the current contents of test.html.

I suspect the answer may have something to do with Why is it suggested to avoid .innerHTML? or Whats wrong here, why is innerHTML not working? but I am an extreme novice and do not fully understand the limitations of innerHTML.

<script>
    // Loads into a div an iframe that itself loads a page from the server.
    document.getElementById("divy").innerHTML="<iframe width='600' height='800' id='cat' src='test.html'></iframe>";
        iframe = document.getElementById('cat');
        //Scrolls iframe to bottom.
        iframe.onload = function () {
            iframe.contentWindow.scrollTo(0,iframe.contentWindow.document.body.scrollHeight);
            console.log(iframe.contentWindow.document.body.scrollHeight);
        }

    refresh_rate = 3000
    // Every refresh_rate miliseconds, replaces the html inside the div with a new iframe so any changes to the page test.html are now shown.
    setInterval(function(){   
        var element = document.getElementById('cat');
        element.parentNode.removeChild(element);
        document.getElementById("divy").innerHTML="<iframe width='600' height='800' id='cat' src='test.html'></iframe>";
        iframe = document.getElementById('cat');
        var x = document.getElementsByTagName('*');
        console.log(x)
        iframe.onload = function () {
            iframe.contentWindow.scrollTo(0,iframe.contentWindow.document.body.scrollHeight);
            console.log(iframe.contentWindow.document.body.scrollHeight);
        }
    }, refresh_rate);
</script>

score 1 · Accepted Answer · answered Sep 02 '15 at 19:28

Your test page is being cached somewhere, you need to bust the cache each time the page reloads. I've added a basic cache buster to a tidied up version of your code.

However, it would be much simpler to just update the src attribute of the iframe, rather than pull out the whole element and reinsert it every three seconds.

<script>

    function loadCat(cacheBuster){
        document.getElementById("divy").innerHTML="<iframe width='600' height='800' id='cat' src='test.html?'+cacheBuster></iframe>";
        var iframe = document.getElementById('cat');
        //Scrolls iframe to bottom.
        iframe.onload = function () {
            iframe.contentWindow.scrollTo(0,iframe.contentWindow.document.body.scrollHeight);
            console.log('iFrame height: ', iframe.contentWindow.document.body.scrollHeight);
        }
    }

    function removeCat(){
        var element = document.getElementById('cat');
        element.parentNode.removeChild(element);
    }

    var refresh_rate = 3000;
    var counter = 0;

    loadCat(counter);

    // Every refresh_rate miliseconds, replaces the html inside the div with a new iframe so any changes to the page test.html are now shown.
    setInterval(function(){
        removeCat()
        loadCat(++counter);
    }, refresh_rate);
</script>

Why doesn't iframe and/or innerHTML of a div always contain the source html of the iframe at time of generation?

1 Answers1