Question

Say you have a global function alert2:

function alert2(msg) {
    window.alert(msg);
}

And you also have a reference to a second window object:

childWindow = window.open(myUrl);

Now you want to call alert2 from window in the context of the childWindow:

alert2.call(childWindow, "does not work without this.window");

The dialog box appears in the main window because “window” inside of alert2 is bound to the window in which this method was defined (the parent window).

One solution is to modify alert2:

function alert2(msg) {
    this.alert(msg);
}

Is it possible to do this without this modification? Something like this:

alert2.call(childWindow.parent, "no such thing as window.parent");

This is a contrived example; childWindow.alert(“”) isn’t what I’m looking for!

My source can be seen and modified on jsfiddle starting with http://jsfiddle.net/hJ7uw/2/

Answer 1

Note: This only works if both windows belong to the same domain (Single Domain Policy).

What you can do is create function in the childWindow:

var func = function() {
    var parent = window; // pointer to parent window
    var child = childWindow;

    return function() {

        ... anything you like to do ...
        parent.alert('Attached to main window')
        child.alert('Attached to child window')
    }
}();

childWindow.func = func; // pass function to child window

The nested functions make sure that you can access the references from the context where the function was created (note the }(); at the end which terminates the first function and calls it immediately).

The last line creates the new function in the child window; all JavaScript code in the child window can access it as window.func, too.

It’s a bit confusing but just think of it like this: You have two window instances/objects. Just like with any JavaScript object, you can assign new properties to them.