Question

我正在尝试与此处的Clipper应用程序类似http://www.polyvore.com/cgi/clipper

我可以让iframe出现在另一个网站（跨域）中。但我不能让“关闭”按钮起作用。

这是我使用的，但它不适用于跨域（基本上删除iframe元素）

window.parent.document.getElementById('someId').parentNode.removeChild(window.parent.document.getElementById('someId'));

你能帮忙吗？感谢。

Answer 1

你应该使用一个抽象它的库（例如http://easyxdm.net/wp/，未经测试）。片段ID消息传递可能无法在所有浏览器中使用，并且有更好的方法，例如postMessage。

但是，您的示例（Clipper）正在使用名为fragment id messaging的黑客。这可以是跨浏览器，前提是包含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在它们启动时会在页面的上下文中生效。在这种情况下，bookmarklet加载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消息传递。

Answer 2

尝试隐藏iframe的内容，不要担心实际删除父级中的iframe元素。

Answer 3

还有另一个旧哈希黑客的实现。它是向后兼容的，简单的javascript，并且非常容易实现：

http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/

关闭iframe跨域

3 个答案: