js 子窗口调用父窗口方法
在JavaScript中，子窗口可以通过window.opener属性访问其父窗口。如果子窗口是由父窗口打开的，那么window.opener将指向父窗口，从而允许子窗口调用父窗口的方法。
基础概念
- 父窗口：最初打开浏览器的窗口或标签页。
- 子窗口：通过父窗口中的脚本打开的新窗口或标签页。
window.opener：一个指向打开当前窗口的那个窗口的引用。
相关优势
- 交互性：允许不同窗口之间进行交互，提高用户体验。
- 模块化：可以将应用程序的不同部分放在不同的窗口中，实现更清晰的逻辑分离。
类型
- 模态对话框：阻止用户与父窗口交互，直到对话框关闭。
- 非模态对话框：允许用户在对话框打开时继续与父窗口交互。
应用场景
- 登录弹窗：用户可以在子窗口中输入凭据，验证成功后通知父窗口。
- 配置设置：用户在子窗口中进行设置，完成后更新父窗口的状态。
示例代码
父窗口代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parent Window</title>
<script>
function openChildWindow() {
var childWindow = window.open('child.html', 'childWindow', 'width=300,height=200');
}
function parentMethod(message) {
alert('Message from child: ' + message);
}
</script>
</head>
<body>
<button onclick="openChildWindow()">Open Child Window</button>
</body>
</html>子窗口代码（child.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Child Window</title>
<script>
function callParentMethod() {
if (window.opener && !window.opener.closed) {
window.opener.parentMethod('Hello from child!');
}
}
</script>
</head>
<body>
<button onclick="callParentMethod()">Call Parent Method</button>
</body>
</html>遇到的问题及解决方法
问题：子窗口无法调用父窗口的方法
原因：
- 父窗口的方法未正确定义。
- 子窗口不是由父窗口打开的。
- 浏览器的安全策略阻止了跨域访问。
解决方法：
- 确保父窗口的方法已经定义并且可访问。
- 确保子窗口确实是由父窗口通过
window.open打开的。 - 如果涉及跨域，确保父窗口和子窗口的域名相同，或者使用CORS策略允许跨域通信。
注意事项
- 安全性：跨窗口通信可能带来安全风险，应谨慎处理敏感数据。
- 兼容性：不同浏览器对
window.opener的支持可能有所不同，应进行充分测试。
通过上述方法，可以实现子窗口与父窗口之间的有效通信。
相关·内容
我正在与多个窗口的firefox扩展。我在此页面上使用示例2。我可以在父窗口和子窗口之间共享变量。它正确调用回调函数(在父窗口中)。然而，如果回调函数必须从父窗口调用某个其他函数。它不起作用。
这是一个范围问题吗？为什么
浏览 1提问于2011-06-01得票数 0
这个页面创建了一个子窗口，而不是使用jquery modals或其他类似的方法来完成此操作。然后，该子窗口可以调用父窗口上的JS函数以插入所述URL。现在，如果我们的用户碰巧选择了一些非常具体的设置，并且星形恰到好处地对齐，那么父页面将显示一个警告框，告诉他们“因为您选择了选项A、E和F，所以我们必须稍微更改选项B”。在最新的firefox中，警告会隐藏在子窗口下：
对于这里
浏览 0提问于2012-08-18得票数 1
回答已采纳
因此，我正在编写一些javascript来处理多个窗口，我需要一种方法来强制执行以下层次结构:主窗口应该是所有其他打开的窗口的父窗口，而不管这些其他窗口是从哪里打开的。即。如果主窗口使用window.open()打开一个子窗口，并且子窗口使用window.open()打开一个窗口，则这两个子窗口需要是主窗口的兄弟和子</
浏览 0提问于2011-03-22得票数 1
回答已采纳
我有一个显示人的父窗口，即：LastName:Brown单击“编辑”按钮，打开子窗口，更改名称，然后单击“接受”，子窗口关闭，更改已保存在mysql数据库中，但父窗口仍然显示旧值。我确实有一个有效的刷新方法，但是如何从子窗口调用它，或者在关闭子窗口后将其设置为调用？
父Windows
浏览 0提问于2016-01-04得票数 3
回答已采纳
我想从窗口B发出一个javascript调用，它是窗口A的子窗口。假设我们有一个窗口A，它的js是ajs.js，窗口B的js是bjs.js，窗口B在窗口A的容器中打开。如何从bjs.js发出对ajs.js函数的调用？
Ext js 3.0/3.4 Windows 7
浏览 5提问于2012-01-23得票数 0
回答已采纳
子窗口关闭后，需要从子窗口刷新父页面。();", true);function showPage() {现在它正常工作了，当我关闭子窗口时，它会
浏览 1提问于2016-03-16得票数 0
我正在尝试调用下面的函数来创建一个新的窗口弹出窗口。无论何时，我都会调用它正在使chrome中的父窗口崩溃。
我观察到的是:在执行openDoctorDetails函数之前，子窗口根本不加载子窗口。
浏览 8提问于2016-12-13得票数 0
我有与中完全相同的需求，即调用子窗口中定义的JavaScript函数(当用户单击父窗口中的链接时)，但是子窗口来自不同的域。还有什么方法可以在子窗口上调用子窗口的JavaScript函数吗？
浏览 6提问于2011-02-16得票数 0
回答已采纳
1回答
在子窗口(弹出窗口)上单击按钮时，如何在父窗口中显示结果？学生对象拥有所有的信息，如名字、姓氏、出生日期、地址等。Jack Tom PaigeFrank Tina May
我想要做的是，当我选中复选框(Es)并单击弹出窗口中的一个按钮时，我想关闭弹出窗
浏览 1提问于2012-10-10得票数 0
回答已采纳
1回答
当本地HTML打开一个子窗口时，该子窗口将加载远程HTTP服务器上的页面。在子窗口中进行了几次用户交互之后，最终的远程页面运行JavaScript来关闭子窗口，我想在关闭之前调用父窗口中的一个函数来传回一些信息。我认为我可以简单地在子窗口中进行以下调用但是，调用不起
浏览 1提问于2014-01-09得票数 0
我有两个窗口:父窗口和子窗口(html页面和iframe)。我想从子窗口重用这个库，而不是将相同的脚本加载到子窗口中。调用父窗口的函数很容易，如下所示：但这里有一个问题: LibraryMethod将在父窗口的执行上下文中执行。这意味着脚本中使用
浏览 0提问于2012-07-13得票数 0
当父页关闭时，需要从子窗口刷新它。我正在从btnsearch_Click打开一个子窗口，代码是：function open_GG9080() { window.open
浏览 2提问于2021-12-03得票数 0
A.aspx打开一个b.aspx的fancybox模式窗口，这意味着a.aspx是父级，b.aspx是子级。要求是单击close按钮，它将触发子窗口(b.aspx)的一个方法，该方法将在if...else条件下关闭窗口。
我面临的问题是我不能在fancybox窗口关闭时调用子窗口方法。我尝试使用'beforeClose‘事件来调用<em
浏览 2提问于2016-04-27得票数 0
1回答
由父窗口定义的弹出窗口由子窗口覆盖。我希望弹出窗口显示在所有应用程序窗口的顶部。我的父窗口有Topmost="True“，包含弹出(带有Placement="AbsolutePoint")，以及启动子窗口的交互请求。在交互请求中，出现了以下情况：
使用Topmost="True“和Owner=parentWindow创建子窗口</
浏览 1提问于2015-03-04得票数 1
我需要在父窗口中显示一个警告，然后在关闭子窗口时刷新它。window.opener.alert('Testing'); }
这确实在父窗口中显示了警报，但我猜因为子窗口在父窗口中，子窗口js会冻结，直到我在父
浏览 2提问于2013-07-03得票数 0
使用依赖项注入原则和DI容器，启动需要在父窗口中作为依赖项进行选择的子对话框的正确模式是什么？示例:在主窗口的列表中选择一个PersonViewModel，然后单击一个按钮启动Details窗口。Details窗口需要一个传递给它的PersonViewModel来提供DataContext。我发现的两种方法：
作为依赖项传入子窗口，并在调用ShowDialog之前使用属性注入来提供子窗口
浏览 9提问于2015-03-17得票数 1
回答已采纳
3回答
有没有可能当子窗口打开时，父窗口最小化并处于非活动状态(子窗口是模式窗口)？在调用子窗口之前，我尝试将父窗口的WindowState属性更改为最小化，但随后子窗口开始最小化。
浏览 3提问于2011-05-02得票数 2
回答已采纳
1回答
下面的代码是从iFrame调用的： cordova.exec(function(responseJSON.stringify(error));这就是我的问题: iframe的cordova.exec能够调用
浏览 4提问于2014-12-04得票数 4
回答已采纳
假设我不知道window.showModalDialog会打开多少子窗口。如果子元素和父元素之间只有1个深度，那么使用javascript调用父元素的函数会很容易。但是我必须打开一个子窗口，然后从那个子窗口转到另一个子窗口，再打开一个，再打开一个。我不能说有多深。现在，在最后一个子窗口中，我如何调用根父级的函数？有谁知道吗？"Root Parent Wi
浏览 0提问于2013-01-24得票数 0
回答已采纳
我在tkinter中有一个父窗口，它打开一个子窗口，如下所示： callChildFunc(data,"y")
这将调用一个函数callChildFunc(data,fill)，该函数接受输入并将其保存到json文件子窗口关闭，如下所示：
def
浏览 20提问于2018-08-11得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
