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