javascript - 从它的子 IFRAME 中删除一个 DIV(跨域)

Question

我正在开发一个从我的服务器加载 Javascript 的小书签。 JS 添加了一个带有嵌入式 iframe 的 div(这样我就可以从我自己的域中传递/加载内容)。

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

我非常希望在 iframe 中包含 iframe 的关闭 按钮。感谢您的帮助。

编辑: 在尝试使用 window.postMessage 时，我尝试使用书签创建一个事件监听器(因此，在任何域上):

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 被删除。