I am launching a popup window with window.open(...) and I pass an elementId to the new popup window.
Then during startup of the popup window I find the element in the opener window that matches the elementId passed to the popup. Then the popup subscribes to events on that element using jQuery.bind(...). Then from inside the opener window I fire these events using jQuery.trigger(...), I also tried triggerHandlers.
The problem is that my popup's eventHandlers never get called. I can subscribe to the events from within inside the opener window no problem. However, when I try from the popup, it doesn't work.
Does anyone have any ideas on how to fix this? Is this some kind of security description?
Thanks a lot for reading!
postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.
The “Same Origin” (same site) policy limits access of windows and frames to each other. The idea is that if a user has two pages open: one from john-smith.com , and another one is gmail.com , then they wouldn't want a script from john-smith.com to read our mail from gmail.com .
Communicating directly between iframes is also possible by combining window. parent with target as defined above. In conclusion, the postMessage method is a more dynamic alternative to the single DOM, better suited if you load multiple pages in one iframe, but not always easier and it still requires the use of the DOM.
postMessage method allows different windows or iframes to communicate directly, even if they were loaded from different origins, circumventing the usual same-origin policy. The sender of the message can restrict the origin of the receiver by specifying a target origin.
OK, when I find the "opener" page element and assign handlers this way:
// in the popup page
$(function() {
var openerElement = window.opener.document.getElementById(theElementId);
$(openerElement).click(function() {
alert("Hello World!");
});
});
Then, to my surprise, native "real" events work just fine. However, custom events fired from the opener page do not get picked up by the popup page. That sort of makes sense, as each page has its own little jQuery universe. I was apparently wrong however about the browser not propagating native events, so thanks for today's learning experience!!
more info — From the popup window (and similarly from any child <iframe>
of the main document), you can also use
var thing_in_main_window = window.opener.$('#thingId');
to find stuff in the opener window. However, simply using the jQuery object in the popup page to find that element cannot work, because jQuery will not traverse the "window.opener" link and go hunting for the element there. When you call $('#thingId')
on the popup page, jQuery is just going to called document.getElementById('thingId')
using the document
object for the popup page. If there's no element called "thingId" on that page, it won't be found.
original answer:
I don't think that what you're trying to do will work. The browser is not going to trigger any event handlers in a window different from the one containing the target element.
You can, however, catch the event in one window and then trigger a custom event in the other window. When you do that, you're probably going to want to trigger the event through the jQuery object on that page. In other words, you'd do this:
$('#thing').click(function() {
otherWindow.jQuery.trigger("thing-clicked");
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With