How to clear the content of an IFRAME?

在网页开发过程中，有时候我们需要动态地清除<iframe>的内容。这通常可以通过几种不同的方法来实现：

方法一：修改 src 属性

最直接的方法是将iframe的src属性设置为空字符串""，或者设置为关于空白的URL，比如"about:blank"。这样可以确保iframe被重新加载为空白页。

javascript
function clearIframe() {
    var iframe = document.getElementById('myIframe');
    iframe.src = "about:blank";
}

方法二：使用 JavaScript 直接操作 DOM

如果你需要更精细地控制iframe的内容，可以使用JavaScript直接操作DOM。可以通过访问iframe的contentDocument或contentWindow.document来清除内部的HTML。

javascript
function clearIframeContent() {
    var iframe = document.getElementById('myIframe');
    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    iframeDoc.body.innerHTML = ""; // 将iframe的body内容设置为空
}

这种方法可以精确到iframe内部的具体元素，进行更细致的清除操作。

示例：动态清除和重置内容

假设我们有一个iframe用于显示用户的操作结果，用户每次操作后都需要清空前一次的结果。

HTML结构如下：

html
<iframe id="resultFrame" src="about:blank"></iframe>
<button onclick="clearAndReset()">清除并重置</button>

JavaScript代码：

javascript
function clearAndReset() {
    var iframe = document.getElementById('resultFrame');
    iframe.src = "about:blank"; // 首先清除iframe内容
    setTimeout(function() {
        iframe.src = "resultPage.html"; // 重新设置src，加载新内容
    }, 500); // 延时是为了确保iframe完全清空后再重新加载
}

这个例子展示了如何先清除iframe内容，然后延时一段时间后，再加载新的页面内容，确保用户每次看到的都是新的结果。

这些方法可以根据实际需求和项目的具体情况进行选择和调整。