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

Posted 2023-05-09

【中文标题】从其子 IFRAME 中删除一个 DIV（跨域）

【英文标题】：Remove a DIV from within it's child IFRAME (cross-domain)

【发布时间】：2011-11-14 05:07:11

【问题描述】：

我正在开发一个从我的服务器加载 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!", "*");
);

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

【问题讨论】：

你见过这个吗？ developer.mozilla.org/en/DOM/window.postMessage

@Digital Plane - 我在问题中添加了详细信息，可能有助于确定我是否正确阅读了该页面。

【参考方案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 的窗口而不是父窗口。我仍然对沟通的工作方式有点模糊，但我现在更接近了。再次感谢您的解决方案。