关闭 iframe 跨域

Posted

技术标签:

【中文标题】关闭 iframe 跨域【英文标题】:Close iframe cross domain 【发布时间】:2011-01-12 00:39:06 【问题描述】:

我正在尝试在http://www.polyvore.com/cgi/clipper 处做类似于 Clipper 应用程序的事情

我可以让 iframe 出现在另一个网站(跨域)中。但我无法使“关闭”按钮起作用。

这是我用的,但它不适用于跨域(基本上删除了 iframe 元素)

window.parent.document.getElementById('someId').parentNode.removeChild(window.parent.document.getElementById('someId'));    

你能帮忙吗?谢谢。

【问题讨论】:

【参考方案1】:

您应该使用一个对其进行抽象的库(例如 http://easyxdm.net/wp/ ,未经测试)。 Fragment ID 消息传递可能不适用于所有浏览器,有更好的方法,例如postMessage。

但是,您的示例 (Clipper) 使用了一个名为 fragment id messaging 的 hack。这可以是跨浏览器的,前提是包含您的 iframe 的页面是顶层。换句话说,总共有两个级别。基本上,孩子设置了父母的片段,父母对此进行监视。

这与 Clipper 的方法类似:

父.html

<html>
<head>
<script type="text/javascript">
function checkForClose()

    if(window.location.hash == "#close_child")
    
      var someIframe = document.getElementById("someId");
      someIframe.parentNode.removeChild(someIframe);
    
    else
    
      setTimeout(checkForClose, 1000)
    

setTimeout(checkForClose, 1000);
</script>
</head>
<body>
<iframe name="someId" id="someId" src="child.html"  >foo</iframe>
</body>
</html>

child.html:

<html>
<head>
<script type="text/javascript">
setTimeout(function()window.parent.location.hash = "close_child";, 5000);
</script>
<body style="background-color: blue"></body>
</html>

EDIT2:跨域和独立控制是不同的。我深入研究了(高度缩小/混淆的)Polyvore 代码,看看它是如何工作的(顺便说一下,它在 Firefox 中没有)。首先要记住,诸如 Clipper 之类的小书签在它们启动时存在于打开的页面的上下文中。在这种情况下,小书签会加载 a script ,然后运行一个生成 an iframe 的 init 函数,但也会运行:

Event.addListener(Event.XFRAME, "done", cancel);

如果您深入了解 addListener,您会发现 (beautified):

if (_1ce2 == Event.XFRAME) 
                        if (!_1cb3) 
                            _1cb3 = new Monitor(function () 
                                return window.location.hash;
                            ,
                            100);
                            Event.addListener(_1cb3, "change", onHashChange);
                        
                     

取消包括:

removeNode(iframe);

现在,剩下的唯一部分是 iframe page 使用 ClipperForm.init 函数加载 another script,其中包括:

Event.addListener($("close"), "click", function () 
            Event.postMessage(window.parent, _228d, "done");
        );

所以我们清楚地看到他们正在使用片段 ID 消息传递。

【讨论】:

这太复杂了,超出了我的需要。我只需要关闭 iframe。有什么简单的方法吗?如果没有,你能举例说明这个是如何做到的吗?谢谢 我无法控制父文档。这就是为什么我说“跨域”。就像 Polyvore 示例一样,它们也不能控制父级,但它们仍然可以关闭 iframe。奇怪! 正如我上面刚刚解释的那样,它们/do/ 控制父级,并且/are/ 使用片段 ID 消息传递。 我不认为这个答案是正确的 - 所描述的方法仍然被大多数浏览器阻止,包括谷歌浏览器。您应该首先使用跨域消息传递(如此处所述 - ***.com/questions/17798618/…),然后您显示的方法可以用作旧浏览器的备份。 @Matthew,我认为您的编辑很好,并清楚表明这不是一个完美的答案,但仍然很有用。我已经删除了我的反对票!欢呼【参考方案2】:

尝试隐藏 iframe 的内容,不要担心实际上会删除父级中的 iframe 元素。

【讨论】:

如何隐藏?我收到此错误xxx.com> 的权限被拒绝以从 yyyy.com> 获取属性 Window.document。所以基本上我找不到用 iframe 做任何事情的方法 我猜如果你在 iframe 里面的东西上设置 document.style.visibility = none (或者你可以隐藏所有的 iframe 内容),你最终还是会得到一个大的白色方块?在这种情况下,您可能确实需要一些 Matthew Flaschen 建议的跨框架通信机制。在注入 iframe 本身的同时,也注入脚本来处理通信的一侧;并且在 iframe 中加载的页面具有处理另一端的脚本。【参考方案3】:

旧的哈希黑客还有另一种实现。它是向后兼容的,简单的仅限 javascript,并且非常容易实现:

http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/

【讨论】:

以上是关于关闭 iframe 跨域的主要内容,如果未能解决你的问题,请参考以下文章

如何关闭ios中网页iframe左右回弹效果

一个页面上面很多iframe会有啥影响?

layui弹窗 之 iframe关闭

求助:js,如何关闭IFRAME的父窗口

如何在 iframe 本身内关闭 iframe

单击 iframe 按钮关闭父窗口