Javascript跨域通信到iframe的父窗口

Javascript communicating cross-domain to parent window of iframe

本文关键字：窗口 iframe 通信 Javascript      更新时间：2023-09-26

我写了一个记笔记的工具，从网页上抓取图像。它通过使用javascript书签将自身作为iFrame加载到当前窗口中:

javascript:(function(){   _my_script=document.createElement('SCRIPT');   _my_script.type='text/javascript';   _my_script.src='http://basereality.test/js/bookmarklet.js?rand='+(Math.random());   document.getElementsByTagName('head')[0].appendChild(_my_script); })();

我希望能够通过从父窗口删除iFrame关闭工具，当用户单击关闭按钮。

最简单的方法是什么-是否有可能关闭iFrame内部?

我已经尝试使用跨域消息发布。我有跨域发布工作从父窗口到子iFrame，但不工作从iFrame到父窗口。

目前我得到的代码(可能包含了问题)如下:

在父窗口中通过动态加载的Javascript:

function    addiFrame(domain){
    var iframe_url = "http://" + domain + "/bookmarklet";
    var div = document.createElement("div");
    div.id = bookmarkletID;
    var str = "";
    iframe_url += "?description=" + encodeURIComponent(document.title);
    iframe_url += "&URL=" + encodeURIComponent(document.URL);
    str += "<div>";
    str += "<iframe frameborder='0' class='toolPanelPopup dragTarget' style='z-index: 1000'  name='bookmarklet_iframe' id='bookmarklet_iframe' src='" + iframe_url + "' width='550px' height='255px' style='textalign:right; backgroundColor: white;' />";
    str += "</div>";
    div.innerHTML = str;
    document.body.insertBefore(div, document.body.firstChild);
}

function jQueryLoadedCallback(){
    jQueryAlias = jQuery.noConflict();
    jQueryAlias('#' + bookmarkletID).bind('basereality.removeFrame', removeFrame);
}
function removeFrame(){
    alert("Calling remove frame");
    $("#" + bookmarkletID).remove();
}

在iFrame中，关闭iFrame的按钮调用:

function removeFrame(){
    var params = {};
    params.message = 'basereality.removeFrame';
    parent.postMessage(params, "*");
}
在iFrame中调用removeFrame不会导致在父窗口中调用removeFrame。

我该如何删除iFrame

postMessage可能就是您正在寻找的。Mozilla已经记录了这一点，它有相当不错的跨浏览器支持:

https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

我还围绕这个概念写了一个库，它可能需要一些调试，但它可以在github: https://github.com/tsharp/OF.Core.js/blob/master/js/of/window.messaging.js

从这里开始，你需要在父窗口上设置一个事件监听器来处理所有传入的请求…这将从父上下文中删除iframe。下面是注册消息接收事件的示例。 
function registerWindowHandler() {
    if (typeof window.addEventListener !== 'undefined') {
    window.addEventListener('message', receiveMessage, false);
    } else {
    // Support for ie8
    window.attachEvent('onmessage', receiveMessage);
    }
}
相关文章：