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元素，可以由子级或父级引用来调度事件，例如app容器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”参考适用于您的应用。

希望有所帮助。

如何在同一个域的Windows上共享事件？

1 个答案: