javascript Javascript跨域通信到iframe的父窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15582211/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript communicating cross-domain to parent window of iframe
提问by Danack
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 书签将自身加载为当前窗口中的 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); })();
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？
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.
我试过使用跨域消息发布。我有从父窗口到子 iFrame 的跨域发布工作，但从 iFrame 到父窗口不起作用。
The code I have so far (which presumably contains the problem) is as follows.
到目前为止，我拥有的代码（大概包含问题）如下。
In the parent window through the dynamically loaded Javascript:
在父窗口中通过动态加载的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();
}
In the iFrame, the button to close the iFrame calls:
在 iFrame 中，关闭 iFrame 的按钮调用：
function removeFrame(){
var params = {};
params.message = 'basereality.removeFrame';
parent.postMessage(params, "*");
}
The removeFrame call in the iFrame doesn't result in the removeFrame being called in the parent window.
iFrame 中的 removeFrame 调用不会导致在父窗口中调用 removeFrame。
So how should I actually remove the iFrame.
那么我应该如何实际删除 iFrame。
回答by Travis Sharp
postMessage is probably what you're looking for. Mozilla has documented this and it has fairly decent cross browser support:
postMessage 可能就是你要找的。Mozilla 已经记录了这一点，并且它具有相当不错的跨浏览器支持：
https://developer.mozilla.org/en-US/docs/DOM/window.postMessage
https://developer.mozilla.org/en-US/docs/DOM/window.postMessage
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
我还围绕这个概念写了一个库，它可能需要一些调试，但它可以在 github 上找到：https: //github.com/tsharp/OF.Core.js/blob/master/js/of/window.messaging。 js
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.
从这里开始，您需要在父窗口上有一个事件侦听器来处理所有传入的请求……这将从父上下文中删除 iframe。下面是一个注册消息接收事件的例子。
function registerWindowHandler() {
if (typeof window.addEventListener !== 'undefined') {
window.addEventListener('message', receiveMessage, false);
} else {
// Support for ie8
window.attachEvent('onmessage', receiveMessage);
}
}
