一文搞懂window.postMessage和window.parent.postMessage

window.parent.postMessage 和 window.postMessage 都是用于在不同窗口或框架之间进行跨域消息传递的方法，但它们的使用场景和功能略有不同，下面为你详细介绍：

相同点

用途：两者都用于实现跨窗口、跨域之间的消息通信，通过这两个方法可以安全地在不同源的窗口或框架之间传递数据。
语法：调用语法基本一致，都接收三个参数，具体语法如下：

1	targetWindow.postMessage(message, targetOrigin, [transfer]);

- `message`：要传递的数据，可以是任意可序列化的数据类型，如字符串、对象等。
- `targetOrigin`：指定目标窗口的源（协议、域名和端口），可以使用 `"*"` 表示不限制源，但为了安全起见，建议指定具体的源。
- `transfer`（可选）：是一个可选的 `Transferable` 对象数组，用于将所有权从发送窗口转移到接收窗口，例如 `MessagePort` 或 `ArrayBuffer`。

不同点

1. 调用对象不同

**window.parent.postMessage**：
- 调用对象：window.parent 表示当前窗口的父窗口。如果当前窗口是一个 iframe，那么 window.parent
  就是包含该 iframe 的窗口。
- 使用场景：主要用于子窗口（如 iframe）向父窗口发送消息。
- 示例代码：

<!-- 父窗口：parent.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<iframe id="myIframe" src="child.html"></iframe>
<script>
    window.addEventListener('message', function (event) {
        if (event.origin === 'http://example.com') {
            console.log('Received message from child:', event.data);
        }
    });
</script>
</body>
</html>

<!-- 子窗口：child.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<script>
    window.parent.postMessage('Hello from child!', 'http://example.com');
</script>
</body>
</html>

在上述代码中，child.html 作为 iframe 嵌入到 parent.html 中，child.html 通过 window.parent.postMessage 向父窗口发送消息。

**window.postMessage**：
- 调用对象：window 通常是指当前窗口本身，但在某些情况下，可以通过 window.open 或 document.querySelector
  获取到其他窗口对象，然后调用 postMessage 方法向这些窗口发送消息。
- 使用场景：可用于当前窗口向其他窗口（如通过 window.open 打开的新窗口）发送消息，也可以在同窗口不同 iframe
  之间进行消息传递。
- 示例代码：

<!-- 主窗口：main.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<button id="openWindowButton">Open New Window</button>
<script>
    const openWindowButton = document.getElementById('openWindowButton');
    let newWindow;

    openWindowButton.addEventListener('click', function () {
        newWindow = window.open('target.html', '_blank', 'width=400,height=300');
        setTimeout(function () {
            if (newWindow) {
                newWindow.postMessage('Hello from main window!', 'http://example.com');
            }
        }, 1000);
    });

    window.addEventListener('message', function (event) {
        if (event.origin === 'http://example.com') {
            console.log('Received message from new window:', event.data);
        }
    });
</script>
</body>
</html>

<!-- 新窗口：target.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<script>
    window.addEventListener('message', function (event) {
        if (event.origin === 'http://example.com') {
            console.log('Received message from main window:', event.data);
            event.source.postMessage('Hello back!', event.origin);
        }
    });
</script>
</body>
</html>

在上述代码中，main.html 通过 window.open 打开 target.html 新窗口，然后使用 newWindow.postMessage 向新窗口发送消息。

综上所述，window.parent.postMessage 侧重于子窗口向父窗口的通信，而 window.postMessage 则更通用，可以用于不同窗口之间的消息传递。