从其子 IFRAME 中删除一个 DIV（跨域）

Question

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

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

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

编辑： 在尝试使用 window.postMessage 时，我尝试使用小书签创建事件侦听器（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 被删除。