我正在尝试在此处执行类似于 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 的初始化函数, 但也运行:
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负载 another script使用 ClipperForm.init 函数，其中包括:
Event.addListener($("close"), "click", function () {
Event.postMessage(window.parent, _228d, "done");
});
所以我们清楚地看到他们正在使用片段 ID 消息传递。
关于javascript - 关闭iframe跨域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2182027/