javascript - 为什么div的iframe和/或innerHTML在生成时不总是包含iframe的源html？

Question

有时，当此脚本在页面上执行时，尤其是浏览器第一次加载页面时，iframe 的内容将显示 test.html 处的页面，但它将是一个缺少一些更改的旧页面从目录手动加载时实际的 test.html 确实包含。每次运行 setInterval() 时，iframe 的内容仍然会过时。

如果刷新整个页面，例如单击刷新按钮，iframe 的内容将被更新，setInterval() 将使 iframe 显示当前的 test.html。然而，如果有足够的时间，setInterval() 有时会停止加载 test.html 的当前内容。

我怀疑答案可能与 Why is it suggested to avoid .innerHTML? 有关。或Whats wrong here, why is innerHTML not working?但我是一个极端的新手，并不完全理解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>

Answer 1

您的测试页面已缓存在某处，每次重新加载页面时您都需要清除缓存。我已将基本的缓存破坏器添加到您的代码的整理版本中。

但是，只更新 iframe 的 src 属性会简单得多，而不是取出整个元素并每三秒重新插入一次。

<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>