JavaScript的通信跨域到iframe的父窗口(Javascript communicatin

2019-07-22 19:19发布

我已经从网页上做笔记,抓住图像写的工具。 它加载自身,通过使用一个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。

Answer 1:

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);
    }
}


文章来源: Javascript communicating cross-domain to parent window of iframe