Callback for a popup window in JavaScript

Question

I hope I did my homework well, searching the Internets for the last couple of hours and trying everything before posting here, but I'm really close to call it impossible, so this is my last resort.

I want a simple thing (but seems like hard in JavaScript):

1. Click button -> Open Window (using window.open)
2. Perform an action in the popup window and return the value to parent (opener)

But I want to achieve it in a systematic way, having a callback defined for this popup; something like:

var wnd = window.open(...)
wnd.callback = function(value) {
    console.log(value);
};

I've tried defining the callback property in popup window JS code:

var callback = null;

Unfortunately, that does not work, as...

$('#action').click(function() {
    console.log(callback);
});

... returns just that "null" I set initially.

I've also tried setting the callback in a parent window after window load (both thru window.onload=... and $(window).ready()), none worked.

I've also tried defining some method in child window source code to register callback internally:

function registerCallback(_callback)
{
    callback = _callback; // also window.callback = _callback;
}

But with the same result.

And I don't have any more ideas. Sure, it would be simple setting the value using window.opener, but I'll loose much of a flexibility I need for this child window (actually an asset selector for DAM system).

If you have some ideas, please share them. Thank you a million!

Solution 1

After few more hours of experiments, I think, I've found a viable solution for my problem.

The point is to reference jQuery from parent window and trigger a jQuery event on this window (I'm a Mac user but I suppose, jQuery has events working cross-platform, so IE compatibility is not an issue here).

This is my code for click handler on anchor...

$(this).find('a[x-special="select-asset"]').click(function() {
    var evt = jQuery.Event('assetSelect', {
        url:        'this is url',
        closePopup: true,
    });
    var _parent = window.opener;
    _parent.jQuery(_parent.document).trigger(evt);
});

... and this is the code of event handler:

$(document).bind('assetSelect', function (evt) {
    console.log(evt);
});

This solution is fine, if you don't need to distinguish between multiple instances of the asset selection windows (only one window will dispatch "assetSelect" event). I have not found a way to pass a kind of tag parameter to window and then pass it back in event.

Because of this, I've chosen to go along with (at the end, better and visually more pleasant) solution, Fancybox. Unfortunately, there is no way - by default - to distinguish between instances either. Therefore, I've extended Fancybox as I've described in my blog post. I'm not including the full text of blog post here, because is not the topic of this question.

URL of the blog post: http://82517.tumblr.com/post/23798369533/using-fancybox-with-iframe-as-modal-dialog-on-a-web

Solution 2

HTML5's postMessage comes to mind. It's designed to do exactly what you're trying to accomplish: post messages from one window and process it in another.

https://developer.mozilla.org/en/DOM/window.postMessage

The caveat is that it's a relatively new standard, so older browsers may not support this functionality.

http://caniuse.com/#feat=x-doc-messaging

---

It's pretty simple to use:

To send a message from the source window:

window.postMessage("message", "*");
//'*' is the target origin, and should be specified for security

To listen for messages in a target window:

window.addEventListener
("message", function(e) {
console.log(e.data); //e.data is the string message that was sent.
}, true);

Comments

[Miro Hudak]

Thank you for your answer, but I'm afraid, I can't go with partial IE support on this and as caniuse.com states, IE support is limited to frame/iframe only (even in IE10.0).