如何从子窗口中使用jQuery调用父窗口函数？

Question

如何从子窗口中使用jQuery调用父窗口函数？

25

当用户专注于子窗口时，我只需要在父窗口中调用函数。我有这段代码在我的父窗口中：

<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>

以下是在我的子窗口中的代码：

<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>

所以...在这种情况下，我认为CallParent()将在子窗口打开后立即触发。但似乎并不起作用。是否有人能给我一些提示使这个脚本工作，或者有更好的方法来实现这个功能。

- Natasha

1

window.opener 包含一个对象还是未定义？控制台中是否有任何错误？ - Ilya Luzyanin

3个回答

14

可以尝试以下类似的代码：

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>

如果您在父级上这样做，opener.CallParent()将无法工作。而在window.CallParent上进行操作会使CallParent在window范围内可用:

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

然后您只需要调用 opener.CallParent();，而不是 window.opener.CallParent();。

- Deepak Biswal

1

尝试这个：window.parent.CallParent(); - Deepak Biswal

1

我使用了以下代码 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>

- Amey P Naik

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Khalid · Accepted Answer

使用此功能

window.parent.CallParent();

取代

window.opener.CallParent();

window.parent 指向当前窗口或子框架的父级引用。

如果一个窗口没有父级，它的parent属性将是对自身的引用。

当一个窗口在<iframe>, <object>, 或者 <frame> 中被加载时，它的父级是包含该窗口的元素所在的窗口。

参考资料：https://developer.mozilla.org/en-US/docs/Web/API/Window/parent