如何在 iframe 内部/从内部关闭 iframe

Question

我有一个来自我的网站的iframe，我在其他一些域上使用它。这个iframe 将从窗口左侧滑出，并且只占用该页面宽度的 600 像素。

我想让用户在点击关闭按钮时能够关闭iframe。

此关闭按钮位于 iframe 的同一 url/src 内。

我想知道如何做到这一点，以便当用户点击 关闭按钮 时，它会将 display: none 添加到 iframe/parent iframe

这是其他网站上使用的iframe：

<iframe src="http://iframe-src.com/this/iframe" id="iframe">

这是我在http://iframe-src.com/this/iframe源代码中的：

function CloseIframe() {
  document.getElementById('iframe').style.display = "none";
}

<p onclick="CloseIframe()">Close</p>

Answer 1

如果没有父网站所有者的合作，这是不可能的：跨域安全规则将阻止您直接进入父网站以隐藏 iframe 本身。最接近的方法是隐藏 iframe 的内容（例如，通过在主体上设置 display:none）——这会使框架本身不可见，但 iframe 区域内的点击不会落入父级窗户。 （不幸的是，即使您在带框的body 上设置了pointer-events:none，也会出现这种情况。）

您最好的选择可能是为这些站点提供一个脚本，它们可以与您的 iframe 标记一起嵌入，这将在父级内部处理框架的“打开”和“关闭”，避免跨域完全的问题。 （就此而言，该脚本也可以注入 iframe 本身，因此他们仍然只有一个元素可以添加到他们的文档中；它只是一个脚本标签而不是 iframe。）

Answer 2

<iframe src="http://iframe-src.com/this/iframe" id="iframe"> </iframe>
<script type="text/javascript">
        function CloseIframe() { 
        document.getElementById('iframe').style.display = "none";  
        } 
</script>
<p onclick="CloseIframe()">Close</p>