Javascript 如何在同一域上跨windows共享事件？

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

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

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

到目前为止，我所尝试的，提炼为一个简单的例子：

关于家长：

HTML:

关于儿童：

HTML:

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

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

---

谢谢你的帮助。

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

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

子iFrame to fire事件到容器的示例代码：

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”引用适用于你的应用程序

---

希望这会有所帮助。

您可以将父事件绑定到iframe中的元素，反之亦然，也可以使用post消息。addEventListener非常有效，谢谢，但不幸的是，它不在IE8中

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

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

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

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