我正在尝试做类似Clipper应用程序的操作http://www.polyvore.com/cgi/clipper
我可以使iframe出现在另一个网站(跨域)中。但是我无法使“关闭”按钮起作用。
这是我使用的方法，但不适用于跨域(基本上删除了iframe元素)
window.parent.document.getElementById('someId').parentNode.removeChild(window.parent.document.getElementById('someId'));
你能帮我吗？谢谢。
最佳答案
您应该使用一个可以对此进行抽象的库(例如http://easyxdm.net/wp/，未经测试)。片段ID消息可能无法在所有浏览器中都起作用，并且有更好的方法，例如postMessage。
但是，您的示例(Clipper)使用的是一种名为fragment id messaging的hack。如果包含iframe的页面位于最顶层，则可以跨浏览器访问。换句话说，共有两个级别。基本上，子级会设置父级的片段，而父级会对此进行监视。
这与Clipper的方法类似:
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:
<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消息传递。