跨窗口的javascript事件

我正在启动一个带有window.open(…)的弹出窗口,我将一个elementId传递给新的弹出窗口。

然后在弹出窗口启动期间,我在开启窗口中找到与传递给弹出窗口的elementId匹配的元素。 然后弹出窗口使用jQuery.bind(…)订阅该元素上的事件。 然后从开启窗口内部我使用jQuery.trigger(…)触发这些事件,我也尝试了triggerHandlers。

问题是我的弹出窗口的eventHandler永远不会被调用。 我可以在开启窗口内部订阅事件没问题。 但是,当我从弹出窗口尝试时,它不起作用。

有没有人对如何解决这个问题有任何想法? 这是某种安全描述吗?

非常感谢阅读!

好的,当我找到“opener”页面元素并以这种方式分配处理程序时:

// in the popup page $(function() { var openerElement = window.opener.document.getElementById(theElementId); $(openerElement).click(function() { alert("Hello World!"); }); }); 

然后,令我惊讶的是,原生的“真实”事件工作正常。 但是 ,弹出页面不会拾取从开启者页面触发的自定义事件。 这是有道理的,因为每个页面都有自己的小jQuery世界。 然而,我显然错误的是浏览器没有传播原生事件,所以感谢今天的学习经历!!

更多信息 – 从弹出窗口(以及类似于主文档的任何子 ),您也可以使用

 var thing_in_main_window = window.opener.$('#thingId'); 

在开启窗口中查找内容。 但是,简单地使用弹出页面中的jQuery对象来查找该元素是行不通的,因为jQuery不会遍历“window.opener”链接并去寻找那里的元素。 当你在弹出页面上调用$('#thingId')时,jQuery将使用弹出页面的document对象调用document.getElementById('thingId') 。 如果该页面上没有名为“thingId”的元素,则无法找到该元素。

原答案:

我不认为你想要做的事情会起作用。 浏览器不会在与包含目标元素的窗口不同的窗口中触发任何事件处理程序。

但是,您可以在一个窗口中捕获事件,然后在另一个窗口中触发自定义事件。 当你这样做时,你可能想要通过该页面上的jQuery对象触发事件。 换句话说,你这样做:

 $('#thing').click(function() { otherWindow.jQuery.trigger("thing-clicked"); }); 

感谢Pointy的回答。 我试验了这个,并希望分享我的发现。 您可以在弹出窗口中实际定义事件侦听器,而无需引用开启器:

在弹出的页面中打开:

 $(document).on("foo", function() { alert("foo"); }); 

在打开弹出窗口的页面中:

 var popup = window.open("popup.html", "_blank", "width=500"); $("#trigger-button").on("click", function() { popup.$(popup.document).trigger("foo"); }); 

秘诀是:即使从弹出窗口对象调用jQuery,也不能直接使用选择器,因为jQuery将尝试在父窗口(opener)窗口中查找元素。