js中怎么在子窗口给父窗口传值

在JavaScript中，可以通过以下几种方式在子窗口给父窗口传值：使用window.opener对象、通过localStorage或sessionStorage、使用消息传递（Message Passing）。其中，window.opener对象是最常用的方式。

一、使用 `window.opener` 对象

window.opener 对象可以让子窗口访问打开它的父窗口，这样可以直接操作父窗口的内容或调用父窗口的函数。下面是详细的描述和示例：

1. 直接修改父窗口的变量

子窗口可以直接修改父窗口中的变量。例如，假设父窗口中有一个变量parentVar，子窗口可以通过window.opener.parentVar来修改它。

<!-- 父窗口 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Window</title>
</head>
<body>
    <script>
        var parentVar = "Initial Value";
        function openChildWindow() {
            window.open('child.html', 'childWindow', 'width=600,height=400');
        }
    </script>
    <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>
</head>
<body>
    <script>
        // 修改父窗口的变量
        window.opener.parentVar = "Updated Value from Child Window";
    </script>
</body>
</html>

在这个示例中，当子窗口被打开时，parentVar的值会被更新为“Updated Value from Child Window”。

2. 调用父窗口的函数

子窗口可以调用父窗口中的函数。假设父窗口中有一个函数updateParent, 子窗口可以通过window.opener.updateParent()来调用它。

<!-- 父窗口 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Window</title>
</head>
<body>
    <script>
        function updateParent(message) {
            document.getElementById('message').innerText = message;
        }
        function openChildWindow() {
            window.open('child.html', 'childWindow', 'width=600,height=400');
        }
    </script>
    <button onclick="openChildWindow()">Open Child Window</button>
    <p id="message">Initial Message</p>
</body>
</html>

<!-- 子窗口 (child.html) -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Window</title>
</head>
<body>
    <script>
        // 调用父窗口的函数
        window.opener.updateParent("Message from Child Window");
    </script>
</body>
</html>

在这个示例中，当子窗口被打开时，父窗口中的updateParent函数会被调用，并更新页面上的消息内容。

二、使用 `localStorage` 或 `sessionStorage`

通过localStorage或sessionStorage也可以在子窗口和父窗口之间传递数据。这两者的区别在于数据的持久性：localStorage中的数据会在浏览器会话结束后依然存在，而sessionStorage中的数据会在会话结束后被清除。

1. 使用 `localStorage`

<!-- 父窗口 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Window</title>
</head>
<body>
    <script>
        function openChildWindow() {
            window.open('child.html', 'childWindow', 'width=600,height=400');
        }
        // 监听 localStorage 变化
        window.addEventListener('storage', function(event) {
            if (event.key === 'message') {
                document.getElementById('message').innerText = event.newValue;
            }
        });
    </script>
    <button onclick="openChildWindow()">Open Child Window</button>
    <p id="message">Initial Message</p>
</body>
</html>

<!-- 子窗口 (child.html) -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Window</title>
</head>
<body>
    <script>
        // 修改 localStorage 的值
        localStorage.setItem('message', 'Message from Child Window');
    </script>
</body>
</html>

在这个示例中，当子窗口修改localStorage中的message值时，父窗口会通过监听storage事件来更新页面上的消息内容。

三、使用消息传递（Message Passing）

通过postMessage方法可以在不同的窗口之间传递消息。这个方法适用于跨域通信。

1. 父窗口发送消息给子窗口

<!-- 父窗口 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Window</title>
</head>
<body>
    <script>
        var childWindow;
        function openChildWindow() {
            childWindow = window.open('child.html', 'childWindow', 'width=600,height=400');
        }
        function sendMessage() {
            if (childWindow) {
                childWindow.postMessage('Message from Parent Window', '*');
            }
        }
    </script>
    <button onclick="openChildWindow()">Open Child Window</button>
    <button onclick="sendMessage()">Send Message to Child</button>
</body>
</html>

<!-- 子窗口 (child.html) -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Window</title>
</head>
<body>
    <script>
        window.addEventListener('message', function(event) {
            alert(event.data);
        });
    </script>
</body>
</html>

在这个示例中，父窗口可以通过postMessage方法发送消息给子窗口，子窗口通过监听message事件来接收消息。

2. 子窗口发送消息给父窗口

<!-- 父窗口 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Window</title>
</head>
<body>
    <script>
        function openChildWindow() {
            window.open('child.html', 'childWindow', 'width=600,height=400');
        }
        window.addEventListener('message', function(event) {
            document.getElementById('message').innerText = event.data;
        });
    </script>
    <button onclick="openChildWindow()">Open Child Window</button>
    <p id="message">Initial Message</p>
</body>
</html>

<!-- 子窗口 (child.html) -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Window</title>
</head>
<body>
    <script>
        // 发送消息给父窗口
        window.opener.postMessage('Message from Child Window', '*');
    </script>
</body>
</html>

在这个示例中，子窗口通过postMessage方法发送消息给父窗口，父窗口通过监听message事件来接收消息并更新页面内容。

四、总结

在JavaScript中，子窗口可以通过多种方式向父窗口传值，常用的方法包括使用window.opener对象、localStorage或sessionStorage、以及消息传递（Message Passing）。这些方法各有优劣，适用于不同的场景：

window.opener：适用于简单的父子窗口通信，但只能在同源（same-origin）情况下使用。
localStorage或sessionStorage：适用于需要持久化数据或在多个窗口之间共享数据的场景。
消息传递（Message Passing）：适用于跨域通信或需要更加灵活和安全的通信方式。

无论选择哪种方法，都需要根据具体的需求和场景进行选择，确保数据传输的安全性和可靠性。

如果涉及到项目团队管理系统的描述，推荐使用以下两个系统：研发项目管理系统PingCode 和 通用项目协作软件Worktile。这两个系统都提供了强大的项目管理和协作功能，能够有效提升团队的工作效率和项目管理水平。