How to call parent window function from child window jquery?

Question

i just need to call function in parent window while user is focusing on child window. i have this code in my parent window,

<html> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script language="Javascript" type="text/javascript">
        function CallParent()
        {
            alert(" Parent window Alert");
        }
    </script>
    <body> 
        <a href="javascript:void(0);" NAME="My Window Name" title=" My title here " onClick=window.open("child.html","Ratting","width=550,height=170,0,status=0,");>Click here to open the child window</a>
    </body> 
</html>

and bellow code is in my child window,

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script language="Javascript" type="text/javascript">
            jQuery(document).ready(function(){  
                window.opener.CallParent();
            });
        </script>
    </head>
    <body> 
        <h2>This is Child window</h2> 
    </body> 
</html>

so..in this case i supposed that CallParent() will be fired just after child window is opened. but it seems to be not working. can any one give me any hints to make this script to work, or any better way to do this.

Does window.opener contain an object or is it undefined? Are there any errors in console? — Ilya Luzyanin, Aug 02 '14 at 20:14

score 22 · Answer 1 · edited Sep 14 '16 at 06:25

22

Use this

window.parent.CallParent();

instead of

window.opener.CallParent();

window.parent holds a reference to the parent of the current window or subframe.

If a window does not have a parent, its parent property is a reference to itself.

When a window is loaded in an <iframe>, <object>, or <frame>, its parent is the window with the element embedding the window.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Window/parent

edited Sep 14 '16 at 06:25

dhh

4,289
8
42
59

answered Aug 02 '14 at 20:30

Khalid

4,730
5
27
50

2

While this may solve the problem, you should provide some explanation to your answer and maybe also include a link to a resource where you can find more info about that. – Sebastian Zartner Aug 02 '14 at 21:04
3

Does it really work? I'm trying to use this approach to no avail - I'm getting the following error: window.parent.CallParent() is not a function... – rshimoda Oct 21 '15 at 19:38
this was working before but right now this not working in any browser please suggest another option – RaviPatidar Mar 31 '16 at 11:08
1

@RaviPatidar This only works if the parent and child windows are on the same origin. If they are on different origins, you can use [window.postMessage()](https://stackoverflow.com/questions/2161388/calling-a-parent-window-function-from-an-iframe) instead. – Anderson Green Aug 10 '21 at 15:50

Deepak Biswal · Answer 2 · 2015-12-07T10:06:38.453

Try something like below:

parent.html

<html> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script language="Javascript" type="text/javascript">
        window.CallParent = function() {
            alert(" Parent window Alert");
        }
    </script>
    <body> 
        <a href="javascript:void(0);" NAME="My Window Name" title=" My title here " onClick=window.open("child.html","Ratting","width=550,height=170,0,status=0,");>Click here to open the child window</a>
    </body> 
</html>

child.html

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script language="Javascript" type="text/javascript">
            jQuery(document).ready(function(){  
                opener.CallParent();
            });
        </script>
    </head>
    <body> 
        <h2>This is Child window</h2> 
    </body> 
</html>

You should not do this on the parent, otherwise opener.CallParent() will not work, doing window.CallParent makes CallParent available as window scope:

function CallParent() {
  alert(" Parent window Alert");
}

And then you can simply call opener.CallParent(); not window.opener.CallParent();.

Try this: `window.parent.CallParent();` – Deepak Biswal Apr 11 '19 at 15:36 — Deepak Biswal, Apr 11 '19 at 15:36

score 1 · Answer 3 · answered Apr 15 '19 at 05:54

I used the following code parent.html

<html> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script language="Javascript" type="text/javascript">
        function CallParent()
        {
            alert(" Parent window Alert");
        }
    </script>
    <body> 
        <a href="javascript:void(0);" NAME="My Window Name" title=" My title here " onClick=window.open("child.html","Ratting","width=550,height=170,0,status=0,");>Click here to open the child window</a>
    </body> 
</html>

child.html

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script language="Javascript" type="text/javascript">
           window.opener.CallParent();
        </script>
    </head>
    <body> 
        <h2>This is Child window</h2> 
    </body> 
</html>

How to call parent window function from child window jquery?

3 Answers3

Linked