跨窗口javascript事件

Question

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

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

问题是我弹出窗口的eventHandlers从来没有被调用过。我可以在打开窗口内订阅事件，没有问题。但是，当我从弹出窗口尝试时，它不起作用。

有没有人有办法解决这个问题？这是某种安全描述吗？

非常感谢你的阅读！

Answer 1

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

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

然后，令我惊讶的是，本地的“真实”事件工作得很好。尽管如此，从打开页面触发的自定义事件会被弹出页面拾取。这在某种程度上是有道理的，因为每个页面都有自己的小jQuery世界。然而，关于浏览器不传播本机事件的说法显然是错误的，所以感谢你今天的学习经验！

更多信息-在弹出窗口中(类似地，从主文档的任何子<iframe> )，您还可以使用

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");
});

Answer 2

感谢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会尝试在父(打开)窗口中查找元素。