JavaScript将跨域传递到iframe的父窗口 [英] Javascript communicating cross-domain to parent window of iframe

问题描述

我写了一个工具来记笔记，从网页抓取图片。它通过使用javascript书签在当前窗口中将其自身作为iFrame加载：

I have written a tool for taking notes, grabbing images from web pages. It loads itself as a iFrame within the current window by using a javascript bookmark:

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来关闭工具，当用户点击关闭按钮。

I want to be able to close the tool by removing the iFrame from the parent window, when the user clicks on a close button.

这是最简单的方法是什么？可以自己关闭iFrame吗？

What is the easiest way of doing this - Is it possible to close an iFrame within itself?

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

I've tried using cross-domain message posting. I have cross-domain posting working from the parent window to the child iFrame, but doesn't work from the iFrame to the parent window.

我到目前为止的代码（可能包含该问题）如下。

The code I have so far (which presumably contains the problem) is as follows.

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

In the parent window through the dynamically loaded 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调用的按钮：

In the iFrame, the button to close the iFrame calls:

function removeFrame(){
    var params = {};
    params.message = 'basereality.removeFrame';
    parent.postMessage(params, "*");
}

iFrame中的removeFrame调用不会导致removeFrame被调用父窗口。

The removeFrame call in the iFrame doesn't result in the removeFrame being called in the parent window.

那么我该如何实际删除iFrame。

So how should I actually remove the iFrame.

推荐答案

postMessage可能是你要找的。 Mozilla已经记录了这一点，它有相当不错的跨浏览器支持：

postMessage is probably what you're looking for. Mozilla has documented this and it has fairly decent cross browser support:

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

I also wrote a library around this concept, it may need a little debugging but it is available on github: https://github.com/tsharp/OF.Core.js/blob/master/js/of/window.messaging.js

从这里，你需要一个事件监听器在父窗口处理所有传入的请求...，这将从父上下文中删除iframe。这是一个注册消息接收事件的示例。

From here you'll need an event listener on the parent window to handle all incoming requests ... which will remove the iframe from the parent context. Here is an example of registering the message received event.

function registerWindowHandler() {
    if (typeof window.addEventListener !== 'undefined') {
    window.addEventListener('message', receiveMessage, false);
    } else {
    // Support for ie8
    window.attachEvent('onmessage', receiveMessage);
    }
}

这篇关于JavaScript将跨域传递到iframe的父窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！