您如何在同一域上的窗口之间共享事件？

Question

假设我的页面上有一个 iframe，并且我有一个可以从父级或框架内触发的事件，但我需要两个页面上的侦听器在任一页面被触发时执行。实现这一目标的最佳方法是什么？

两个页面都在同一个域上，所以我不需要担心同源安全策略问题。

我正在使用 jQuery，但如果需要，我很乐意使用裸 JavaScript。

到目前为止我已经尝试过，提炼成一个简单的例子：

在父级上：

HTML：

<input type="button" value="Click me"/>
<iframe src='child.html'/></iframe>

JS：

$(function() {
  var $iframe = $('iframe');
  $(document).on('custom_event', function() {
    alert('hello from parent!');
    $($iframe[0].contentWindow.document).trigger('custom_event');
  });
  $('input').on('click', function() {
    $(document).trigger('custom_event');
  });
});

在孩子身上：

HTML：

<input type="button" value="Click me too"/>

JS：

$(function() {
  $('input').on('click', function() {
    $(document).trigger('custom_event');
  });
  $(document).on('custom_event', function() {
    alert('hello from child!');
    $(window.parent.document).trigger('custom_event');
  });
});

我希望单击任一按钮也会在另一个窗口中触发“custom_event”。即在父级中能够通过$iframe.contentWindow.document 触发框架中的事件，同样在框架中能够通过window.parent.document 触发事件，但可惜没有！没有错误、警告或任何其他线索。

是我做错了什么，遗漏了一些明显的东西，还是这不可能？

Answer 1

我最近也遇到了同样的情况。关键是要找到一个高级 DOM 元素，它可以被子级或父级引用以在诸如应用程序容器 div 上调度事件。

我有多个 iframe，因此传递了一个“targetFrame”id，以便在所有帧都捕获事件的情况下，只有正确的 iframe 才会执行（最佳实践 MVC 松散耦合）。您还可以动态添加任何您喜欢的参数。

子 iFrame 向容器触发事件​​的示例代码：

var evt = document.createEvent('Event');
evt.initEvent('myEvent', true, true);
evt.targetFrame = "Frame1";
element = parent.document.getElementById('containerDiv'); // $('#containerDiv') for parent
element.dispatchEvent(evt);

子 iframe 监听事件的代码：

parent.document.addEventListener('myEvent', function( evt) {
    if(evt.targetFrame == "Frame1") {
        // won't execute your code here in other frames.
    }
});

您只需弄清楚哪些“parent.document”参考适用于您的应用。

希望对您有所帮助。