跨窗口 JavaScript 事件

Question

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

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

问题是我的弹出窗口的事件处理程序永远不会被调用。我可以从开启器窗口内订阅事件，没有问题。但是，当我从弹出窗口尝试时，它不起作用。

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

非常感谢您的阅读！

Answer 1

好的，当我找到“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') 弹出页面的 /code> 对象。如果该页面上没有名为“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 将尝试在父（打开器）窗口中查找元素。