iframe 监听父文档中的事件答案

【问题标题】：Iframe listen for event in parent documentiframe 监听父文档中的事件
【发布时间】：2016-06-22 12:47:08
【问题描述】：

我正在尝试从 <iframe> 中侦听父文档在父文档上触发的事件

在父窗口中：

$(document).on('MyNameSpace.MyEvent', function() {
    console.log('Event received in parent');  
});
$(document).trigger('MyNameSpace.MyEvent');

在 iframe 中：

//test1
$(parent.document).on('MyNameSpace.MyEvent', someFunction);
//test2
parent.$(document).on('MyNameSpace.MyEvent', someFunction);

var someFunction = function() {
    console.log('Event received in Iframe');
};

当事件在父文档上触发时，上述两个测试都无法触发。仅控制台输出：

Event received in parent

我怎样才能实现所需的行为？

注意事项

iframe 和父级都在同一个域中。
在用户交互（例如点击）之后，在父级和 iframe 的 DOM 完全加载之后触发。
需要旧版浏览器支持 (IE8+)

【问题讨论】：

页面和 iframe 是否在同一个域中？
是的，始终用于此实现。
似乎应该可以，但我也试过了。可以使用 postMessage API
很想，但它需要支持旧版浏览器...
IE 8 有对 iframe 的 postMessage 支持，你肯定不支持任何旧版本

标签： javascript jquery iframe

【解决方案1】：

尝试使用：

parent.$(parent.document).on('MyNameSpace.MyEvent', someFunction);

如果 parent 支持 jQuery，上述解决方案有效。

从当前 iframe 中监听 parent，你必须使用 'parent.$'。由于这是父 iframe 中的事件，因此您必须使用“parent.document”。

【讨论】：

请在这个答案中添加一些解释，为什么必须使用它。