postMessage() 方法允许来自不同源的窗口进行异步通信。它主要用于跨域通信，比如在 iframe 中嵌入的页面和父页面之间通信，或者与弹出窗口进行通信。
基本概念
什么是同源策略？
同源策略是一种安全措施，限制了一个源加载或访问另一个源的资源的能力。如果两个页面的协议、域名和端口都相同，则它们被认为是同源的。
为什么需要跨域通信？
当网页试图从不同的源加载资源时，浏览器会阻止这种行为以防止潜在的安全威胁。然而，在某些情况下，我们可能需要在不同源之间进行通信，这时就需要使用 postMessage() 方法。
使用场景
- iframe 通信：在一个页面中嵌入了来自其他源的 iframe，想要与 iframe 中的内容进行通信。
- 弹出窗口：通过
window.open()打开的新窗口，需要与原始窗口进行通信。 - 多窗口通信：在多个浏览器窗口或标签页之间共享数据。
基本语法
targetWindow.postMessage(message, targetOrigin);
targetWindow：要发送消息的目标窗口。message：要发送的消息内容，可以是任何类型的数据。targetOrigin：指定接收消息的窗口应该位于哪个源。它可以是以下几种形式："*"：表示任何源都可以接收消息。- 一个具体的 URL：例如
"https://example.com"，只有来自该源的窗口才能接收到消息。
示例代码
父窗口向 iframe 发送消息
-- -------------------- ---- -------
---- --- ---- ---
------- ------------- ----------------------------------------------
------- -------------------------------------
--------
-------- ------------- -
--- ------ - --------------------------------------------------
------------------------- ---- --------- -----------------------
-
---------iframe 接收消息并处理
-- -------------------- ---- -------
---- ------ -- ---- ---
--------
---------------------------------- --------------- -
-- ----------
-- ------------- --- ---------------------- -------
-- --------
--------------------- -------- - - ------------
-- -------
---------安全注意事项
- 验证消息来源：始终检查
event.origin属性，确保消息来自预期的源。 - 限制消息类型：只接受特定类型的消息，并且对消息内容进行适当的验证。
- 避免执行不可信代码：不要直接执行接收到的消息中的代码，特别是当消息来源不可信时。
跨浏览器兼容性
postMessage() 方法已被所有现代浏览器广泛支持，包括 Chrome、Firefox、Safari 和 Edge。但是，为了保证最佳兼容性，建议在使用之前检查浏览器支持情况。
if (window.postMessage) {
// 支持 postMessage 的浏览器执行代码
} else {
// 不支持 postMessage 的浏览器回退方案
}总结
postMessage() 是实现跨源通信的重要方法，适用于各种复杂的前端应用场景。正确地使用它不仅可以提升用户体验，还能增强应用的安全性。希望这篇参考能够帮助你更好地理解和运用这个强大的工具。