关闭iframe跨域 [英] Close iframe cross domain
问题描述
我想在这里执行类似于Clipper应用程式的操作 http://www.polyvore.com / cgi / clipper
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元素） p>
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/ ，未测试）。片段ID消息可能无法在所有浏览器中使用，并且有更好的方法，例如
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）使用的是一个名为 fragment id messaging 。这可以是跨浏览器，只要包含您的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:
parent.html
parent.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>
EDIT2：跨域和独立控制是不同的。我挖入了（严重缩减/混淆）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 page 载入另一个脚本与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屋！
