HP.*_*HP. 10 html javascript iframe jquery cross-domain
我想在这里做一些类似于Clipper应用程序的东西http://www.polyvore.com/cgi/clipper
我可以让iframe出现在另一个网站(跨域)中.但我无法使"关闭"按钮起作用.
这是我使用的,但它不适用于跨域(基本上删除iframe元素)
window.parent.document.getElementById('someId').parentNode.removeChild(window.parent.document.getElementById('someId'));
你能帮我吗？谢谢.
Mat*_*hen 19
你应该使用一个抽象的文库(例如http://easyxdm.net/wp/,未经过测试).片段ID消息传递可能无法在所有浏览器中使用,并且有更好的方法,例如postMessage.
但是,您的示例(Clipper)正在使用称为片段ID消息传递的黑客.这可以是跨浏览器,前提是包含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,在它们启动时会在页面的上下文中生效.在这种情况下,bookmarklet加载一个脚本,该脚本又运行一个生成iframe的init函数,但也运行:
Event.addListener(Event.XFRAME, "done", cancel);
如果你深入了解addListener,你会发现(美化):
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函数的脚本,该函数包括:
Event.addListener($("close"), "click", function () {
Event.postMessage(window.parent, _228d, "done");
});
所以我们清楚地看到他们正在使用片段ID消息.