[英]Close iframe cross domain
I am trying to do something similar to the Clipper application here http://www.polyvore.com/cgi/clipper 我想在这里做一些类似于Clipper应用程序的东西http://www.polyvore.com/cgi/clipper
I can make the iframe appear in another website (cross domain). 我可以让iframe出现在另一个网站(跨域)中。 But I cannot make the "close" button to work.
但我无法使“关闭”按钮起作用。
This is what I used but it doesn't work for cross domain (basically remove the iframe element) 这是我使用的,但它不适用于跨域(基本上删除iframe元素)
window.parent.document.getElementById('someId').parentNode.removeChild(window.parent.document.getElementById('someId'));
Can you help? 你能帮我吗? Thanks.
谢谢。
You should use a library that abstracts this (eg http://easyxdm.net/wp/ , not tested). 你应该使用一个抽象的库(例如http://easyxdm.net/wp/ ,未经过测试)。 Fragment ID messaging may not work in all browsers, and there are better approaches, such as postMessage .
片段ID消息传递可能无法在所有浏览器中使用,并且有更好的方法,例如postMessage 。
However, your example (Clipper) is using a hack called fragment id messaging . 但是,您的示例(Clipper)正在使用称为片段ID消息传递的黑客。 This can be cross-browser, provided the page containing your iframe is the top level.
这可以是跨浏览器,前提是包含iframe的页面是顶级。 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.
基本上,子项设置父项的片段,父项监视它。
This is a similar approach to Clipper's: 这是与Clipper类似的方法:
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: Cross-domain and independently controlled are different. EDIT2:跨域和独立控制是不同的。 I dug into the (heavily minified/obfuscated) Polyvore code to see how it works (incidentally, it doesn't in Firefox).
我挖掘了(严重缩小/混淆)Polyvore代码以查看它是如何工作的(顺便说一下,它不在Firefox中)。 First remember that bookmarklets, such as the Clipper, live in the context of the page open when they start.
首先请记住,诸如Clipper之类的bookmarklet在它们启动时会在页面的上下文中生效。 In this case, the bookmarklet loads a script , which in turn runs an init function which generates an iframe , but also runs:
在这种情况下,bookmarklet加载一个脚本 ,该脚本又运行一个生成iframe的init函数,但也运行:
Event.addListener(Event.XFRAME, "done", cancel);
If you digg into addListener, you'll find ( beautified ): 如果你深入了解addListener,你会发现( 美化 ):
if (_1ce2 == Event.XFRAME) {
if (!_1cb3) {
_1cb3 = new Monitor(function () {
return window.location.hash;
},
100);
Event.addListener(_1cb3, "change", onHashChange);
}
}
cancel includes: 取消包括:
removeNode(iframe);
Now, the only remaining piece is that the iframe page loads another script with a ClipperForm.init function that includes: 现在,唯一剩下的部分是iframe页面加载另一个带有ClipperForm.init函数的脚本 ,该函数包括:
Event.addListener($("close"), "click", function () {
Event.postMessage(window.parent, _228d, "done");
});
So we see clearly they are using fragment ID messaging. 所以我们清楚地看到他们正在使用片段ID消息。
尝试隐藏iframe的内容,不要担心实际删除父级中的iframe元素。
There is another implementation of the old hash hack. 还有另一个旧哈希黑客的实现。 It's backwards compatible, easy javascript-only, and very easy to implement:
它向后兼容,简单的javascript,并且非常容易实现:
http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/ http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.