关闭 iframe 跨域 [英] Close iframe cross domain
问题描述
我正在尝试在此处执行类似于 Clipper 应用程序的操作 http://www.polyvore.com/cgi/剪刀
I am trying to do something similar to the Clipper application here http://www.polyvore.com/cgi/clipper
我可以让 iframe 出现在另一个网站(跨域)中.但我无法使关闭"按钮起作用.
I can make the iframe appear in another website (cross domain). But I cannot make the "close" button to work.
这是我使用的，但它不适用于跨域(基本上删除 iframe 元素)
This is what I used but it doesn't work for cross domain (basically remove the iframe element)
window.parent.document.getElementById('someId').parentNode.removeChild(window.parent.document.getElementById('someId'));
你能帮忙吗?谢谢.
推荐答案
你应该使用一个抽象的库(例如 http://easyxdm.net/wp/ ，未经测试).Fragment ID 消息传递可能不适用于所有浏览器，有更好的方法，例如 postMessage.
You should use a library that abstracts this (e.g. http://easyxdm.net/wp/ , not tested). Fragment ID messaging may not work in all browsers, and there are better approaches, such as postMessage.
但是，您的示例 (Clipper) 正在使用一种名为 片段 ID 消息.这可以是跨浏览器的，前提是包含 iframe 的页面是顶级页面.也就是说，一共有两个层次.基本上，孩子设置了父母的片段，父母会注意这一点.
However, your example (Clipper) is using a hack called fragment id messaging. This can be cross-browser, provided the page containing your iframe is the top level. In other words, there are a total of two levels. Basically, the child sets the fragment of the parent, and the parent watches for this.
这与 Clipper 的方法类似:
This is a similar approach to Clipper's:
父.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" height="800" width="600">foo</iframe>
</body>
</html>
child.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>
跨域和独立控制是不同的.我深入研究了(严重缩小/混淆的)Polyvore 代码以查看它是如何工作的(顺便说一句，它不在 Firefox 中).首先请记住，书签(例如 Clipper)在它们启动时处于打开页面的上下文中.在这种情况下，书签加载 一个脚本，它依次运行一个 init 函数生成 一个 iframe，但也运行:
Cross-domain and independently controlled are different. I dug into the (heavily minified/obfuscated) Polyvore code to see how it works (incidentally, it doesn't in Firefox). First remember that bookmarklets, such as the Clipper, live in the context of the page open when they start. In this case, the bookmarklet loads a script , which in turn runs an init function which generates an iframe, but also runs:
Event.addListener(Event.XFRAME, "done", cancel);
如果你深入了解 addListener，你会发现 (beautified):
If you digg into addListener, you'll find (beautified):
if (_1ce2 == Event.XFRAME) {
if (!_1cb3) {
_1cb3 = new Monitor(function () {
return window.location.hash;
},
100);
Event.addListener(_1cb3, "change", onHashChange);
}
}
取消包括:
removeNode(iframe);
现在，唯一剩下的部分是 iframe 页面 加载 另一个脚本，带有 ClipperForm.init 函数，包括:
Now, the only remaining piece is that the iframe page loads another script with a ClipperForm.init function that includes:
Event.addListener($("close"), "click", function () {
Event.postMessage(window.parent, _228d, "done");
});
所以我们清楚地看到他们正在使用片段 ID 消息.
So we see clearly they are using fragment ID messaging.
这篇关于关闭 iframe 跨域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
