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/
The call() method is a predefined JavaScript method. It can be used to invoke (call) a method with an owner object as an argument (parameter). With call() , an object can use a method belonging to another object.
Context — globally and inside a function. foo is the function is defined at the global level and is called on global level object i.e window so calling foo and window. foo is same. Hence the context is a window object. this inside function called on function object at global level.
If we want to, we can dynamically change the execution context of any method by using either call() or apply(). Both of these functions can be used to bind the "this" keyword to an explicit context.
As the Function object is a predefined object in JavaScript, it has methods and properties associated with it. Two of these methods are call() and apply() . Using these methods on a Function object allows you to set the context of that function – that is, what the “ this ” keyword refers to.
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.
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