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>