Question

我正在开发一个从我的服务器加载Javascript的书签。 JS添加了一个带有嵌入式iframe的div（因此我可以从我自己的域中传递/加载内容）。

我无法弄清楚如何从iframe中删除DIV元素，包括iframe。我无法引用window.parent，因为它是跨域的。 window.postMessage看起来可能是正确的想法，但我找不到足够的文档来帮助我理解它。

我非常想在iframe中使用iframe的关闭按钮。感谢您的帮助。

编辑：在我尝试使用window.postMessage时，我尝试使用bookmarklet创建一个事件监听器（ergo，在任何域上）：

var receiveMessage = function(event) {
    $("#iframecontainerdiv").remove();
    console.log (event);
    alert (event.origin);
}
window.addEventListener("message", receiveMessage, false);

然后在iframe中，我试图触发它：

$("#abort").click( function(e) {
    e.preventDefault();
    window.close();
    window.postMessage("Hello, World!", "*");
});

我不确定我是否正确行事......

Answer 1

我认为您将邮件发布到了错误的窗口。也许您应该使用window.top.postMessage发布消息，指示顶部窗口删除iframe。

所以：

var receiveMessage = function(event) {
    if ("close-iframe" == event.data) {
        $("#iframecontainerdiv").remove();
    }
    console.log (event);
    alert (event.origin);
}
window.addEventListener("message", receiveMessage, false);

和

$("#abort").click(function(e) {
    e.preventDefault();
    window.top.postMessage("close-iframe", "*");
});

您可以选择测试邮件的来源，以便只有来自您网域的邮件会导致iframe被删除。

从它的子IFRAME中删除DIV（跨域）

1 个答案: