js 在不同页面交互的方法和应用

在Web开发中，有时我们需要实现不同页面之间的数据传递和事件触发，比如一个页面打开了另一个页面，然后在新的页面中操作后需要更新原来的页面的内容。这种场景在电商、支付、社交等领域都很常见，那么如何用js来实现不同页面之间的交互呢？

本文将介绍一种常用的方法，即window.postMessage()，以及它的使用场景和注意事项。

## 什么是window.postMessage()？

window.postMessage()是HTML5提供的一种安全的跨源通信方法。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机（两个页面的模数Document.domain设置为相同的值）时，这两个脚本才能相互通信。

window.postMessage()方法提供了一种受控机制来规避此限制，只要正确地使用，这种方法就很安全。从广义上讲，一个窗口可以获得对另一个窗口的引用（比如targetWindow = window.opener），然后在窗口上调用targetWindow.postMessage()方法分发一个MessageEvent消息。接收消息的窗口可以根据需要自由处理此事件。传递给window.postMessage()的参数（比如message）将通过消息事件对象暴露给接收消息的窗口。

## 如何使用window.postMessage()？

window.postMessage()方法有两个参数：message和targetOrigin。message是要发送的数据，可以是任何类型的对象。targetOrigin是指定接收消息的窗口的源（协议+主机+端口），可以是"*"表示不限制源，但这样会降低安全性。

发送消息的窗口可以通过window.open()或其他方式获取目标窗口的引用，然后调用postMessage()方法。例如：

// 打开一个新窗口
 var newWindow = window.open("https://example.com");

 // 发送一个消息
 newWindow.postMessage("Hello", "https://example.com");
 ```



接收消息的窗口可以通过监听message事件来处理消息，事件对象包含以下属性：

- data：发送的数据
- origin：发送消息的窗口的源
- source：发送消息的窗口对象

接收消息的窗口可以根据origin和source属性来验证消息的发送者是否可信，然后根据data属性来执行相应的逻辑。例如：

```js
 // 监听message事件
 window.addEventListener("message", function(event) {
 // 验证是否为可信来源
 if (event.origin !== "https://example.com") {
 return;
 }

 // 处理数据
 console.log(event.data); // "Hello"

 // 发送回复
 event.source.postMessage("Hi", event.origin);
 });
 ```

 ## window.postMessage()有什么应用场景？



window.postMessage()方法可以应用于以下场景：

- 父子窗口通信：当一个页面打开了另一个页面时，可以通过window.opener或window.parent获取对方窗口的引用，然后通过postMessage()方法进行数据传递和事件触发。
- 同源或跨域iframe通信：当一个页面嵌入了另一个页面时，可以通过window.frames或document.getElementById()获取对方窗口的引用，然后通过postMessage()方法进行数据传递和事件触发。
- 同源或跨域tab页通信：当一个页面打开了另一个tab页时，可以通过localStorage或BroadcastChannel等方式进行数据传递和事件触发，也可以通过postMessage()方法进行数据传递