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!

Answer 1

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