Can't call function of parent window in child window - javascript

I have problem that I can't call function of parent window in child window.
var value = "test";
function drawChart() {
myWindow = window.open("", "Chart", "width=500, height=500");
myWindow.console.log(parent.value);
myWindow.parent.createGraph();
}
function createGraph(){
...
}
I can access global variable value, but not call function createGraph.
I am getting error:
Uncaught TypeError: myWindow.createGraph is not a function
I moved all javaScript in head, but still not working.

I think you're after:
window.opener: Returns a reference to the window that opened this current window
So, for example, within your popup window, you call your function like:
window.opener.createGraph();
Edit: Of course it wouldn't work with the way you've been trying! You need to call the parent function within the scope of the opened child window. What you're doing is calling them within the same function that triggered the child window and NOT within the child window.
Here is a hacky way along the same lines of your code. Bear in mind, this is only tested on Chrome.
$("button").on("click", function() {
var win = window.open("", "Chart", "width=400,height=400");
win.console.log("New window");
win.callFunc = function(fn) {
win.console.log(fn());
}
win.callFunc(aParentFunction);
});
function aParentFunction() {
return "Hiya, I am your dad.";
}
A Demo

Related

Detecting when popup window is closed in Firefox

I open a new window like this:
var newWindow = window.open('myPage.aspx', null, 'height=650,width=900,status=yes,toolbar=no,scrollbars=yes,menubar=no,location=no,top=0, left=0');
And I wait for it to close:
var windowTimer = window.setInterval(function () {
if (win.closed !== false) {
//If window is closed ...
window.clearInterval(windowTimer);
}
}, 100);
This does work in Chrome and IE9 and Edge but not in Firefox, why?
Firefox does get inside the function but it never gets on win.closed if, even if there is an else it neither goes into it... is there any alternative to this?
Solution that worked for me:
On the popup window:
//Fires an event on the window that opened it
window.onbeforeunload = function () {
window.opener.myEvent();
};
On the main window:
window.myEvent= function () {
//This fires only when the popup gets closed on beforeunload
}
Note: the event to fire in the main window must be declared as public so it can be accessible, like so window.myEvent= function ()
Another reference: cross-window javascript events
Basically, I think the simplest way to do this is the following:
function hasClosed(){
document.getElementById('open').textContent = 'window has been closed';
}
window.addEventListener('beforeunload', function(){
if(window.opener) window.opener.hasClosed();
});
document.getElementById('open').addEventListener('click', function(e){
e.preventDefault();
window.open('test.html');
});
open window
Please keep in mind that SO snippets are not allowed to open windows, so the code is not functional inside the snippet. Simply copy the code and save it as a file called test.html.
You do not need to keep checking, the child will simply call the function on the parent. This has the advantage that you are not using resources to keep checking for it. Also, be aware that when navigating in this window, onbeforeunload gets called if a new page is loaded, calling the parent function, but maybe you could just do the check you were already doing in the hasClosed function.
You might want to give an uuid to your window and pass it into it so it can inform you of it's identity on closing, but that's all refinement.

access value returned value of child window in parent window's function

I am opening a popup window to make oAuth now i want to catch the final output of the child window to the function from where its been populated.
$scope.login__linkedin=function() {
var child_window=$window.open('http://localhost/oAuthTest/lrvl/public/login','Authentication', 'width=500,height=500');
child_window.onload = function() {
setTimeout(function(){ console.log(child_window.document.documentElement.outerHTML) }, 2000);
//i want my child window value somewhere here.
}
};
i am not getting my final success response code (i am getting nothing actually) in console.
I want to make login via linkedin and success in opening the window and getting the user authenticated,but the success response if showing me on my child window i want to get this response on my parent window.
Open your child window
var child_window=$window.open('http://localhost/oAuthTest/lrvl/public/login','Authentication', 'width=500,height=500');
(I'm sure this is from the same domain)
Add a function for the popup window to execute. This function can transfer some data from Popup to Caller through arguments.
child_window.selectUser = function(userId) {
console.log(userId);
//Do whatever you like with this authenticated user
}
Now your popup window has selectUser function which it can call after authenticating the user.
Try to replace $window with window
What the following gives?
(function() {
var child_window=window.open('http://localhost/oAuthTest/lrvl/public/login','Authentication', 'width=500,height=500');
child_window.onload = function() {
setTimeout(function(){ alert(child_window.document.documentElement.outerHTML); }, 2000);
}
})();

Why is my method not seeing this.property?

In the code below, initializeBoard has access to the property, and the console returns 'white' when I start the script. But when I click inside the window, I get 'undefined'. What obvious thing am I missing? (Bonus: what's the search query that'd have led me to the answer without having to ask?)
var view = {
currentMove: 'white',
initializeBoard: function() {
console.log(this.currentMove);
},
click: function(e) {
console.log(this.currentMove);
}
}
window.onload = function() {
view.initializeBoard();
document.onclick = view.click;
}
The value of this is determined by how the function is called, not by where it is first assigned.
You are copying the (reference to the) function to document.onclick.
When the click event happens document.onclick is called. view.click is not called (even though it has the same value as document.onclick). This means that this is document not view.
Use bind if you want to create a wrapper function that calls the original function in the right context.
document.onclick = view.click.bind(view);

Pass variable from child window to parent window between 2 applications

I have opened a child window using a showModal dialog where the URL points to a different website as the main window does.
I want to pass some variables from the child window to the parent window using the script below.
Script used in Parent window:
function Open() {
var Return;
Return = window.showModalDialog("https://example.com/ChildApp/ChildForm.aspx", "", "dialogWidth:670px;dialogHeight:600px;")
alert(Return.passVariable);
}
The URL for the parent window is something like this: https://example.com/MainApp/MainForm.aspx
Script used in Child window:
function Close(parameter) {
var vReturnValue = new Object();
vReturnValue.passVariable= parameter;
window.returnValue = vReturnValue;
window.close();
}
In the main window, Return returns null.
One more issue exists when I'm trying to get a reference of window.parent, it gives a null value in the child window.
Note: Here ChildApp and MainApp are two different applications.

Add new function to parent window from same-domain iframe

From a same domain iframe I want to create a new function and append it to the parent window and then invoke that function from either the iframe or the parent. Something like this.
parent.myFunction = function(){ ... }; myfunction;
is there a good way to do this?
You can do almost exactly what you did
parent.myFunction = function(){ ... };
parent.myfunction(); // calling the function in parent window
And from the parent window, you'll be able to do simply
myFunction();
to invoke function from child window use parent.myfunction();
parent.myFunction = function(){ ... }; parent.myfunction();

Categories