Question

我有一个文件列表。当我点击它们时，内容显示在一个框架内。我遇到的问题是：当我打开一个文件并移动到下一个文件时（如果文件大小更大，加载需要一些时间），旧文件的内容仍会显示在iframe中。一旦我点击下一个文件，我想清除iframe中旧文件的内容，同时加载我可以显示加载指示。

要清除iframe中的内容，我尝试了一些方法，但无法成功。你能告诉我这个吗？

我的HTML

<div id="result">
 <div style="overflow: auto;" id="testIframeBox">
 <iframe id="testiframe" name="testIframe" onload="">iFramenot supported</iframe></div>
</div>

我使用location.replace

显示点击的文件

window.frames['testIframe'].location.replace(URL+"&download=1&inline=1&resourceId="+resourceId+"&time=" + Date.now());

清除内容：

if(document.getElementById('testiframe'))
    {
    var frame = document.getElementById("testIframe"),
    frameDoc = frame.contentDocument || frame.contentWindow.document;
    frameDoc.documentElement.innerHTML="";
    }

在填充内容之前，我还尝试用加载指示器替换内容：

window.frames['testIframe'].location.replace('div class="loading-animation"></div>');

Answer 1

据我了解，您的问题分为两部分：

...清除iframe内的内容......

答案很简单，您使用src的{{1}}属性来控制其内容。通常接受的做法是为iframe分配about:blank，以使其加载浏览器的默认空白文档。

仅当您在src中加载的文档位于同一域中时，才会使用

contentDocument，否则跨域安全会阻止您的尝试。

..在填充内容之前，我尝试用装载指示器替换内容..

这很棘手。 iframe上的iframe事件会在浏览器中一致触发，但这并不意味着文档已准备就绪。 load在跨浏览器的实现方面很不稳定。在我使用的浏览器中，至少Chrome无法启动它。 DOMContentLoaded事件是DOMFrameContentLoaded特定的，只有Firefox触发它。

请参阅：How to properly receive the DOMContentLoaded event from an XUL iframe?

您可以选择使用jQuery并依赖其moz处理程序，它可以为您提供接近一致的结果。但是，正如我从你的问题中看到你没有使用jQuery并依赖于普通的Javascript。在这里，IMO最便宜的选择是处理on.("load")事件并使用load注入faux延迟来模拟加载。以下代码段将向您说明。

<强> 段：

＆＃13;

setTimeout

＆＃13;

document.getElementById("a1").addEventListener("click", load);
document.getElementById("a2").addEventListener("click", load);
document.getElementById("testiframe").addEventListener("load", loaded);

function load() {
    var lnk = this.innerText;
    var iframe = document.getElementById("testiframe");
    iframe.src = "about:blank";
    document.getElementById("loader").style.display = "block";
    setTimeout(function() {
        iframe.src = lnk;    /* small delay to avoid successive src assignment problems */
    }, 500);
}

function loaded() {
    /* faux delay to allow for content loading */
    setTimeout(function() {
        document.getElementById("loader").style.display = "none";
    }, 1000);
    
}

＆＃13;

div#testIframeBox {
    width: 320px; height: 240px;
    position: relative;    
}

iframe {
    width: 100%; height: 100%;
    position: absolute;    
    top: 0px; left: 0px;
}

div#testIframeBox > div {
    position: absolute; 
    top: 16px; left: 16px;
    padding: 8px;
    background-color: yellow;
    display: none;
}

＆＃13;

清除现有的iframe内容

1 个答案: