从它的子IFRAME(跨域)中删除DIV

Remove a DIV from within it's child IFRAME (cross-domain)

本文关键字：删除 DIV 跨域 IFRAME      更新时间：2023-09-26

我正在制作一个从服务器加载Javascript的bookmarklet。JS添加了一个div与嵌入iframe(所以我可以传递/加载内容从我自己的域)。

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

我非常想有iframe的关闭按钮在iframe。感谢您的协助。

编辑:在我尝试使用窗口。postMessage，我已经尝试用bookmarklet(因此，在任何域上)创建一个事件侦听器:

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!", "*");
});

我想你把消息发错窗口了。也许你应该使用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被删除。

相关文章：