js子窗口调用父窗口的方法

在JavaScript中，子窗口可以通过window.opener属性访问其父窗口。如果子窗口是通过window.open()方法打开的，那么window.opener将指向打开它的窗口。这样，子窗口就可以调用父窗口中定义的方法。

基础概念

window.opener: 这是一个指向打开当前窗口的那个窗口的引用。
跨文档消息传递（Cross-document messaging）: 使用postMessage方法可以在不同源的窗口之间安全地传递消息。

类型

同步调用: 直接通过window.opener.methodName()调用父窗口的方法。
异步调用: 使用postMessage进行跨窗口通信，适用于不同源的情况。

应用场景

登录验证: 子窗口用于用户登录，登录成功后通知父窗口更新界面。
文件上传: 子窗口用于选择文件，上传完成后将结果返回给父窗口。
复杂表单: 将表单分割到多个窗口中，便于用户填写和管理。

示例代码

父窗口代码

<!DOCTYPE html>
<html>
<head>
    <title>Parent Window</title>
</head>
<body>
    <button onclick="openChildWindow()">Open Child Window</button>
    <script>
        function openChildWindow() {
            window.childWindow = window.open('child.html', 'childWindow');
        }

        function parentMethod() {
            alert('This method is called from the child window!');
        }
    </script>
</body>
</html>

子窗口代码

<!DOCTYPE html>
<html>
<head>
    <title>Child Window</title>
</head>
<body>
    <button onclick="callParentMethod()">Call Parent Method</button>
    <script>
        function callParentMethod() {
            if (window.opener && !window.opener.closed) {
                window.opener.parentMethod();
            } else {
                alert('Parent window is not available.');
            }
        }
    </script>
</body>
</html>

遇到的问题及解决方法

问题：子窗口无法调用父窗口的方法

原因:

父窗口的方法未定义。
子窗口打开时，父窗口还未完全加载。
浏览器的同源策略限制。

解决方法:

确保父窗口的方法已经定义。
在父窗口加载完成后再打开子窗口。
如果涉及跨域，使用postMessage进行安全通信。

示例：使用`postMessage`进行跨域通信

父窗口代码:

window.addEventListener('message', function(event) {
    if (event.origin !== 'http://example.com') return; // 安全检查
    if (event.data === 'callParentMethod') {
        parentMethod();
    }
});

子窗口代码:

function callParentMethod() {
    window.opener.postMessage('callParentMethod', 'http://example.com');
}

通过这种方式，即使子窗口和父窗口不在同一个域，也可以安全地进行通信。

页面内容是否对你有帮助？

有帮助

没帮助

firefox扩展多窗口回调函数错误

、

我正在与多个窗口的firefox扩展。我在此页面上使用示例2。我可以在父窗口和子窗口之间共享变量。它正确调用回调函数(在父窗口中)。然而，如果回调函数必须从父窗口调用某个其他函数。它不起作用。这是一个

浏览 1提问于2011-06-01得票数 0

1回答

在firefox中更改警报选项卡/窗口焦点

、、

所以我有一个有趣的问题。我有一个页面，允许用户选择外部来源的图像网址。这个页面创建了一个子窗口，而不是使用jquery modals或其他类似的方法来完成此操作。然后，该子窗口可以调用父窗口上的JS函数以插入所述URL。在最新的firefox中，警告会隐藏在子窗口下：对于这里的屏幕截图，我移动了

浏览 0提问于2012-08-18得票数 1

回答已采纳

1回答

在javascript中维护特定的窗口层次结构

、

因此，我正在编写一些javascript来处理多个窗口，我需要一种方法来强制执行以下层次结构:主窗口应该是所有其他打开的窗口的父窗口，而不管这些其他窗口是从哪里打开的。即。如果主窗口使用window.open()打开一个子窗口，并且子窗口使用window.open()打开一个窗口，则这两个子窗口</em

浏览 0提问于2011-03-22得票数 1

回答已采纳

4回答

如何在JavaFX中关闭子窗口后刷新父窗口？

、、

我有一个显示人的父窗口，即：LastName:Brown单击“编辑”按钮，打开子窗口，更改名称，然后单击“接受”，子窗口关闭，更改已保存在mysql数据库中，但父窗口仍然显示旧值。我确实有一个有效的刷新方法，但是如何从子窗口调用它，或者在关闭子窗口后将其设置为调用？

浏览 0提问于2016-01-04得票数 3

回答已采纳

2回答

从子窗口向父窗口函数发出javascript函数调用。

、、

我想从窗口B发出一个javascript调用，它是窗口A的子窗口。假设我们有一个窗口A，它的js是ajs.js，窗口B的js是bjs.js，窗口B在窗口A的容器中打开。如何从bjs.js发出对ajs.js函数的调用？ Ex

浏览 5提问于2012-01-23得票数 0

回答已采纳

1回答

location.reload事件触发按钮单击事件

、、

我有一个简单的要求。子窗口关闭后，需要从子窗口刷新父页面。();", true);function showPage() {现在它正常工作了，当我关闭<

浏览 1提问于2016-03-16得票数 0

1回答

尝试在window.open之后从父窗口调用子窗口函数

、、

我正在尝试调用下面的函数来创建一个新的窗口弹出窗口。无论何时，我都会调用它正在使chrome中的父窗口崩溃。我观察到的是:在执行openDoctorDetails函数之前，子窗口根本不加载子窗口。

浏览 8提问于2016-12-13得票数 0

1回答

调用子窗口中的JavaScript函数

我有与中完全相同的需求，即调用子窗口中定义的JavaScript函数(当用户单击父窗口中的链接时)，但是子窗口来自不同的域。还有什么方法可以在子窗口上调用子窗口的JavaScript函数吗？

浏览 6提问于2011-02-16得票数 0

回答已采纳

1回答

关闭提交窗口上的弹出，并在父窗口中显示结果

、、、、

在子窗口(弹出窗口)上单击按钮时，如何在父窗口中显示结果？学生对象拥有所有的信息，如名字、姓氏、出生日期、地址等。Jack Tom PaigeFrank Tina May 我想要做的是，当我选中复选框(Es)并单击弹出<em

浏览 1提问于2012-10-10得票数 0

回答已采纳

1回答

子窗口如何在其父窗口上调用函数？

、、

当本地HTML打开一个子窗口时，该子窗口将加载远程HTTP服务器上的页面。在子窗口中进行了几次用户交互之后，最终的远程页面运行JavaScript来关闭子窗口，我想在关闭之前调用父窗口中的一个函数来传回一些信息。我认为我可以简单地在子窗口中进行以下调用 window.parent.Callba

浏览 1提问于2014-01-09得票数 0

1回答

如何使用子窗口上下文执行父窗口中定义函数

我有两个窗口:父窗口和子窗口(html页面和iframe)。我想从子窗口重用这个库，而不是将相同的脚本加载到子窗口中。调用父窗口的函数很容易，如下所示：但这里有一个问题: LibraryMethod将在父窗口<

浏览 0提问于2012-07-13得票数 0

1回答

location.reload事件在重新加载页面后触发按钮单击事件

、

我有一个简单的要求。当父页关闭时，需要从子窗口刷新它。我正在从btnsearch_Click打开一个子窗口，代码是： sclientScript="open_GG9080('?ClientScript.RegisterStartupScript(this.GetType(), "event","<script type='text/javascript'>"&sclientScript&&

浏览 2提问于2021-12-03得票数 0

1回答

从fancybox中的父窗口访问子窗口方法

、、

A.aspx打开一个b.aspx的fancybox模式窗口，这意味着a.aspx是父级，b.aspx是子级。要求是单击close按钮，它将触发子窗口(b.aspx)的一个方法，该方法将在if...else条件下关闭窗口。我面临的问题是我不能在fancybox窗口关闭时调用子窗口方法。我尝试使用'be

浏览 2提问于2016-04-27得票数 0

1回答

如何防止弹出窗口被新的子窗口覆盖？

、、、、

由父窗口定义的弹出窗口由子窗口覆盖。我希望弹出窗口显示在所有应用程序窗口的顶部。我的父窗口有Topmost="True“，包含弹出(带有Placement="AbsolutePoint")，以及启动子窗口的交互请求。在交互请求中，出现了以下情况：使用Topmost="True“和Ow

浏览 1提问于2015-03-04得票数 1

1回答

iFrame内部的cordova回调

、、、

主页是从带有localhost url的nanohttp加载的。主页面包含一个iFrame，它从与主页面(localhost)相同的域加载一些页面。下面的代码是从iFrame调用的： cordova.exec(function(responsefunction(error) { },&quo

浏览 4提问于2014-12-04得票数 4

回答已采纳

2回答

实例化和显示依赖于在当前窗口中选择的值的窗口的正确模式是什么？

、、、

使用依赖项注入原则和DI容器，启动需要在父窗口中作为依赖项进行选择的子对话框的正确模式是什么？示例:在主窗口的列表中选择一个PersonViewModel，然后单击一个按钮启动Details窗口。Details窗口需要一个传递给它的PersonViewModel来提供DataContext。我发现的两种方法：作为依赖项传入子窗口，并在<em

浏览 9提问于2015-03-17得票数 1

回答已采纳

3回答

显示子窗口时，将最小化父窗口

、

有没有可能当子窗口打开时，父窗口最小化并处于非活动状态(子窗口是模式窗口)？在调用子窗口之前，我尝试将父窗口的WindowState属性更改为最小化，但随后子窗口开始最小化。

浏览 3提问于2011-05-02得票数 2

回答已采纳

2回答

wpf中父窗口与子窗口的通信

、

我有一个启动子窗口的父窗口，在子窗口中执行了一些选择/操作之后，我想将一些信息发送回父窗口(一个自定义的类对象)，使用WPF提供的功能在WPF中实现这一点的最佳方法是什么？

浏览 8提问于2010-09-20得票数 5

1回答

如何从子弹出窗口在javascript的父窗口中显示警报？

我需要在父窗口中显示一个警告，然后在关闭子窗口时刷新它。window.opener.alert('Testing'); } 这确实在父窗口中显示了警报，但我猜因为子窗口在父窗口中，子窗口js会冻结，直到我在父

浏览 2提问于2013-07-03得票数 0

2回答

如何使用javascript从第n个子窗口调用root父函数？

假设我不知道window.showModalDialog会打开多少子窗口。如果子元素和父元素之间只有1个深度，那么使用javascript调用父元素的函数会很容易。但是我必须打开一个子窗口，然后从那个子窗口转到另一个子窗口，再打开一个，再打开一个。我不能说有多深。现在，在最后一个子窗口中，我如何调用根父级的函数？有谁知道吗？&q

浏览 0提问于2013-01-24得票数 0

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js子窗口调用父窗口的方法

基础概念

相关优势

类型

应用场景

示例代码

父窗口代码

子窗口代码

遇到的问题及解决方法

问题：子窗口无法调用父窗口的方法

示例：使用postMessage进行跨域通信

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

示例：使用`postMessage`进行跨域通信