js 子窗口向父窗口传值

在JavaScript中，子窗口向父窗口传值通常涉及window.opener对象的使用。以下是基础概念和相关操作的详细解释：

基础概念

window.opener: 当一个窗口是通过window.open()方法打开的，那么这个新窗口会有一个opener属性，指向打开它的窗口。
postMessage API: 这是一个安全的跨源通信机制，允许不同源的窗口之间传递消息。

传值方法

方法一：使用 `window.opener`

父窗口代码:

<!DOCTYPE html>
<html>
<head>
    <title>Parent Window</title>
</head>
<body>
    <button onclick="openChildWindow()">Open Child Window</button>
    <div id="result"></div>

    <script>
        function openChildWindow() {
            var childWindow = window.open('child.html', '_blank');
        }

        // 监听来自子窗口的消息
        window.addEventListener('message', function(event) {
            // 安全检查，确保消息来源是预期的源
            if (event.origin !== "http://example.com") return;
            
            document.getElementById('result').innerText = event.data;
        });
    </script>
</body>
</html>

子窗口代码 (child.html):

<!DOCTYPE html>
<html>
<head>
    <title>Child Window</title>
</head>
<body>
    <button onclick="sendDataToParent()">Send Data to Parent</button>

    <script>
        function sendDataToParent() {
            var data = "Hello from child!";
            window.opener.postMessage(data, "http://example.com");
        }
    </script>
</body>
</html>

方法二：使用 `localStorage` 或 `sessionStorage`

父窗口代码:

// 监听storage事件
window.addEventListener('storage', function(event) {
    if (event.key === 'childData') {
        console.log('Data received from child:', event.newValue);
    }
});

子窗口代码:

// 设置存储数据
localStorage.setItem('childData', 'Hello from child!');

优势与应用场景

postMessage:
- 优势: 支持跨域通信，安全性高。
- 应用场景: 当父窗口和子窗口不在同一个域时，或者需要更细粒度的控制消息传递时。
localStorage/sessionStorage:
- 优势: 简单易用，适用于同源页面间的数据共享。
- 应用场景: 同源页面间需要共享数据，且不需要实时通信的场景。