javascript 在所有浏览器之间传递来自 iFrame 的消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7479246/
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
Passing Messages from iFrame Across all Browsers
提问by Dusda
I have an embed-able iframe that will be used on 3rd party sites. It has several forms to fill out, and at the end must inform the parent page that it is done.
我有一个可嵌入的 iframe，将在 3rd 方网站上使用。它有几个表格要填写，最后必须通知父页面它已完成。
In other words, the iframe needs to pass a message to it's parent when a button is clicked.
换句话说，当单击按钮时，iframe 需要将消息传递给它的父级。
After wading through oceans of "No, cross-domain policy is a jerk" stuff, I found window.postMessage, part of the HTML5 Draft Specification.
在涉过“不，跨域策略是一个混蛋”的海洋之后，我找到了window.postMessage，它是 HTML5 草案规范的一部分。
Basically, you place the following JavaScript in your page to capture a message from the iframe:
基本上，您将以下 JavaScript 放在页面中以从 iframe 捕获消息：
window.addEventListener('message', goToThing, false);
function goToThing(event) {
//check the origin, to make sure it comes from a trusted source.
if(event.origin !== 'http://localhost')
return;
//the event.data should be the id, a number.
//if it is, got to the page, using the id.
if(!isNaN(event.data))
window.location.href = 'http://localhost/somepage/' + event.data;
}
Then in the iframe, have some JavaScript that sends a message to the parent:
然后在 iframe 中，使用一些 JavaScript 向父级发送消息：
$('form').submit(function(){
parent.postMessage(someId, '*');
});
Awesome, right? Only problem is it doesn't seem to work in any version of IE. So, my question is this: Given that I need to pass a message froman iframe to it's parent (both of which I control), is there a method I can use that will work across any (>IE6) browser?
很棒，对吧？唯一的问题是它似乎不适用于任何版本的 IE。所以，我的问题是：鉴于我需要将消息从iframe传递给它的父级（这两个都是我控制的），是否有一种方法可以在任何（> IE6）浏览器中使用？
采纳答案by jfriend00
The main work-around I've seen used involves setting a hash value on the parent window and detecting the hash value in the parent, parsing the hash value to obtain the data and do whatever you want. Here's one example of doing that: http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/. There are more options via Google like this one: http://easyxdm.net/wp/.
我见过的主要解决方法包括在父窗口上设置哈希值并检测父窗口中的哈希值，解析哈希值以获取数据并执行您想要的任何操作。这是这样做的一个例子：http: //www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/。通过谷歌有更多这样的选择：http: //easyxdm.net/wp/。
回答by Kaszaq
In IE you should use
在 IE 中你应该使用
attachEvent("onmessage", postMessageListener, false);
instead of
代替
addEventListener("message", postMessageListener, false);
回答by T9b
This is way simpler than that.
这比那简单得多。
You say you control both the parent and the content of the frame you can set up two way communication in javascript.
您说您可以控制框架的父级和内容，您可以在 javascript 中设置双向通信。
All you need is
所有你需要的是
yourframename.document.getElementById('idofsomethinginttheframe')
And then from inside the frame address anything outside it with
然后从框架内部寻址它外部的任何东西
parent.document
