javascript 清除现有的 iframe 内容

clear existing iframe contents

提问by user596502

I have a list of files. When i click on them, the contents are displayed inside an frame. The problem i have is: when i open one file and move to next one (if the file is of greater size, it takes some time to load), the contents of old file still shows up in iframe. As soon as i click next file, i want to clear the contents of old file in iframe and meanwhile it's loading i can display a loading indicator.

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

To clear the contents inside iframe i tried some ways but could not succeed. Can you advise me on this

为了清除 iframe 中的内容，我尝试了一些方法但未能成功。你能给我建议吗

My HTML

我的 HTML

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

I show up the clicked file using location.replace

我使用 location.replace 显示点击的文件

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

To clear contents:

清除内容：

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

Also i tried to replace the contents with loading indicator before filling the contents:

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

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

回答by Abhitalks

As I understand, there are two parts to your question:

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

1. ... To clear the contents inside iframe ...

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

The answer to this is simple, you use the srcattribute of the iframeto control its contents. Commonly accepted practice is to assign a about:blankto the srcto cause it to load browsers's default blank document.

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

contentDocumentis supposed to be used only when the document which you are loading in your iframeis in the same domain, otherwise cross-domain security blocks your attempts.

contentDocument应该仅在您加载的文档iframe在同一域中时使用，否则跨域安全会阻止您的尝试。

2. ..I tried to replace the contents with loading indicator before filling the contents..

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

This is tricky. loadevent on iframe does fire consistently across browsers, but this does not mean the document is ready. DOMContentLoadedis flaky in its implementation across browsers. Of the browsers I use, at least Chrome fails to fire it. DOMFrameContentLoadedevent is mozspecific and only Firefox fires it.

这很棘手。loadiframe 上的事件确实会在浏览器之间持续触发，但这并不意味着文档已准备就绪。DOMContentLoaded其跨浏览器的实现是不稳定的。在我使用的浏览器中，至少 Chrome 无法启动它。DOMFrameContentLoaded事件是moz特定的，只有 Firefox 会触发它。

See this: How to properly receive the DOMContentLoaded event from an XUL iframe?

请参阅：如何从 XUL iframe 正确接收 DOMContentLoaded 事件？

One option with you is to use jQuery and rely on its on.("load")handler which may provide you with near-consistent results. But, as I see from your question that you are not using jQuery and relying on plain-vanilla Javascript. Here, IMO the cheapest option for you is to handle the loadevent and inject a fauxdelay using setTimeoutto simulate loading. The following snippet will make it clear to you.

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

Snippet:

片段：

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);
    
}

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

<div> 
    <a href="#" id="a1">http://jquery.com</a>
    &nbsp;|&nbsp;
    <a href="#" id="a2">http://example.com</a>
</div>
<hr />
<div id="result">
    <div id="testIframeBox">
        <iframe id="testiframe" name="testIframe"></iframe>
        <div id="loader">Loading...</div>
    </div>
</div>