关闭 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 跨域的主要内容,如果未能解决你的问题,请参考以下文章