HTML - 删除 iframe 显示答案

【问题标题】：HTML - Remove iframe DisplayHTML - 删除 iframe 显示
【发布时间】：2020-03-25 01:42:29
【问题描述】：

我创建了一个带有 iframe 的 HTML 页面（主页面），因此当我单击按钮时，iframe 将显示覆盖整个页面。但是，每当我单击 iframe 到主页的后退按钮时，我遇到了如何删除它的问题。

这是我的代码：

function displayIframe() {
  document.getElementById("iframeDisplay").innerHTML = "<iframe src=\"./iframe/iframe.html\" height=\"100%\" width=\"100%\" ></iframe>";
}

<div id="iframeDisplay"> </div>
<button onclick="displayIframe()">Display Iframe</button>

你能帮助我如何通过 javascript 或 jquery 实现关闭 iframe

【问题讨论】：

标签： javascript jquery html iframe

【解决方案1】：

您可以将 iframe 包装在 div 中，然后在该 div 中添加后退按钮和 iframe。

将点击监听器添加到后退按钮并删除按钮点击时的Iframe。

示例：

function back() {
    document.getElementById("iframe").remove();
}

.back-button {
            position: absolute;
            right: 2px;
        }

<div style="width: 100%; height: 100%">
    <button class="back-button" onclick="back()">Back</button>
    <iframe id="iframe" src="http://google.com" height="100%" width="100%">
    
    </iframe>
</div>

【讨论】：

但问题是，后退按钮在我的 iframe html 文件中找到
您无法从 iframe 与外部环境进行交互。

【解决方案2】：

由于您的框架的来源与包含页面位于同一域（甚至站点）上，因此您应该能够从框架的代码访问父级。

window.parent.document.querySelector('iframe').style.display = 'none';

【讨论】：

感谢伊戈尔的回答。您能否添加更多细节，以便帮助 Euph 更好地理解解决方案？