Nw.js: Node-Webkit: Child window to call parent window

Created on 20 Feb 2013 · 7Comments · Source: nwjs/nw.js

Hi Everybody,
I have created one main window & child window ,
Parent window code:mainwin.html
++++++++++++++++++++++++++++++++++++++++++++++++++++++
var mainwin = gui.Window.get();
var childwin = gui.Window.open('childwin.html', {
x: 100, y: 100, width: 200, height: 300
});
function changeparentmethod()
{
alert('came main');
mainwin.show(true);
}
++++++++++++++++++++++++++++++++++++++++++++++++++++++
inside childwin.html file, Can i call the any mainwin window methods and properties like below ?
Child window code:childwin.html
++++++++++++++++++++++++++++++++++++++++++++++++++++++
var currwin = gui.Window.get();
currwin.opener.changeparentmethod();
++++++++++++++++++++++++++++++++++++++++++++++++++++++
For this i am getting an error, how to implement this functionality??
In javascript opener method is working fine.

Source

anandh

👍1

Most helpful comment

Thanks i found Solution it was simple with pure JavaScript
window.opener.function_name()
is solved my issue..

freddy-daniel on 11 Jul 2016

❤2 👍1

All 7 comments

The working approach is probably initiating a call from the parent window to its child after the loaded event occurs.

Try the following in mainwin.html:

childwin.on('loaded', function(){
   childwin.window.haveParent(mainwin);
});

and the following in childwin.html:

function haveParent(theParent){
   theParent.window.changeparentmethod();
}

Mithgol on 21 Feb 2013

Thanks Mithgol,
Its working ok,
But below scenario is not working,
mainwin.html
+++++++++++++++++++++++++++++++++++++++++++++++++++
var mainwin = gui.Window.get();
//for viewing purpose its hide html code(its not showing in this editor).
//inside popContent i have added the below popscript.js script and a also html content.
var popContent = '

Click me

';
var newpopup = window.open('popup.html', 'Test Popup');
newpopup.document.write(popContent);
newpopup.document.close();
var testpop = gui.Window.get(newpopup);
testpop.on('loaded', function(){
console.log('came loaded testpop');
testpop.window.haveParent(win);
});
function changeparentmethod()
{
console('Called & Came main window');
mainwin.show(true);
}
++++++++++++++++++++++++++++++++++++++++++++++++++++
popscript.js->inside(popup.html) file
++++++++++++++++++++++++++++++++++++++++++++++++++++
var gui = require('nw.gui');
var win = gui.Window.get();
function haveParent(theParent){
console.log('came haveParent');
parentwindowcontrol(theParent);
}
function parentwindowcontrol(parentwindow)
{
console.log("came parentwindowcontrol");
document.onclick = docclickhandler;
function docclickhandler() {
parentwindow.window.changeparentmethod(popup);
}

++++++++++++++++++++++++++++++++++++++++++++++++++++

Please check it and update me how to implement?

anandh on 28 Feb 2013

here is my code,just modified a little from yours @anandh :
index.html

<!DOCTYPE html>
<html>
<head>
    <title>
        test 
    </title>
</head>
<body>
    <script type="text/javascript">
        gui = require('nw.gui');
        var mainwin = gui.Window.get();
        var newpopup = gui.Window.open('popup.html', 'Test Popup');
        newpopup.on('loaded', function(){
            console.log('came loaded testpop');
            newpopup.window.haveParent(mainwin);
        });
        function changeparentmethod(){
            console.log('Called & Came main window');
            mainwin.show(true);
        }
    </script>
</body>
</html>

popup.html:

<!DOCTYPE html>
<html>
<head>
    <title>
        test child
    </title>
</head>
<body>
    <script type="text/javascript">
        var gui = require('nw.gui');
        var win = gui.Window.get();
        function haveParent(theParent){
            console.log('came haveParent');
            parentwindowcontrol(theParent);
        }
        function parentwindowcontrol(parentwindow){
            console.log("came parentwindowcontrol");
            document.onclick = docclickhandler;
            function docclickhandler() {
                parentwindow.window.changeparentmethod();
            }
        }
    </script>
</body>
</html>

and it works ok for me. maybe you could just use newpopup to handle the onloaded event instead of getting another one.
btw, I'm testing on windows8 with node-webkit-v0.7.1

richardcypher on 21 Aug 2013

😕1

I got this Error in console while running above code

extensions::schemaUtils:113 Uncaught Error: Invocation of form nw.Window.open(string, string) doesn't match definition nw.Window.open(string url, optional object options, optional function callback)

freddy-daniel on 8 Jul 2016

@freddy-tech that's because be.Window.open has changed from nw13 and onwards. See the latest documentation.

RohitSharma27 on 8 Jul 2016

Thanks i found Solution it was simple with pure JavaScript
window.opener.function_name()
is solved my issue..

freddy-daniel on 11 Jul 2016

❤2 👍1

My god. what are you getting wrong English? Oh :(

hasParent() is correct because Adobe System writes clean like AS3 has "has[variable-functionname]" example hasEvent, hasProprety or whatever

Please change "haveParent" to "hasParent" because window = it that is why It has - But "have" means "we have" or "they have" or "you have". That is wrong. Thanks for changing alphabets.

Thanks!