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

时间:2013-07-09 16:14:08

标签: javascript jquery javascript-events cross-window-scripting

假设我的页面上有一个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触发事件,但是没有!没有错误,警告或任何其他线索。

我做错了什么,错过了一些明显的东西,或者这是不可能的?

感谢您的帮助。

1 个答案:

答案 0 :(得分: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”参考适用于您的应用。

希望有所帮助。