Set a callback function to a new window in javascript

Question

Is there an easy way to set a "callback" function to a new window that is opened in javascript? I'd like to run a function of the parent from the new window, but I want the parent to be able to set the name of this particular function (so it shouldn't be hardcoded in the new windows page).

For example in the parent I have:

function DoSomething { alert('Something'); }
...
<input type="button" onClick="OpenNewWindow(linktonewwindow,DoSomething);" />

And in the child window I want to:

<input type="button" onClick="RunCallbackFunction();" />

The question is how to create this OpenNewWindow and RunCallbackFunction functions. I though about sending the function's name as a query parameter to the new window (where the server side script generates the appropriate function calls in the generated child's HTML), which works, but I was thinking whether there is another, or better way to accomplish this, maybe something that doesn't even require server side tinkering.

Pure javascript, server side solutions and jQuery (or other frameworks) are all welcomed.

Answer 1

Updated for comments: If you're opening your window via window.open() then in your child page you can set a function in the child to just be a reference pointing to a parent function, so have this in the child page:

var RunCallbackFunction = function() { }; //reference holder only

Then in your parent (opener), set that function when that child window loads, like this:

//random function you want to call
function myFunc() { alert("I'm a function in the parent window"); }

//to actually open the window..
var win = window.open("window.html");
win.onload = function() { win.RunCallbackFunction = myFunc; };

This assigns the function in your parent to now be the target of that child...and you can point each child to a different function if you wish, they're all independent.

Answer 2

var newWindow = window.open(window.location.origin);

newWindow.onload = function() {
    $(newWindow.document.body).addClass('new-window-body-class');
};