写在前面

假设有这样一个场景，你接到一个项目。需要在这个项目上完成一次迭代，但是你发现这个项目已经是三年前的老项目了。框架、组件库都非常老，甚至连基本的语法都让人头疼。你无从下手，不知所措，效率非常低下。

而现在的网页开发几乎都是用最新的框架。例如 Vue、React 开发起来都非常顺手，节省时间和精力。再看于是你想，能不能自己用新框架开发，接下来再在老项目里嵌入使用？老实说，这时你又重燃希望，觉得可以快很多。

但很快就出现了新问题——如何把自己的新框架嵌入到老框架里？表面上看，只需要把打包好的 js、css 资源引入即可。但随后你又发现：两者并没有真正交互，仅仅是资源被加载，却没有通信机制。

经过一番调研，你找到了 window.postMessage这正是解决跨窗口通信的利器。老实说，

什么是 postMessage

window.postMessage 方法提供了一种安全的跨域通信机制。怎么说呢，在浏览器安全策略中，不同源的页面之间通常是相互隔离的。通过 window.postMessage一个窗口可以向另一个窗口发送消息，只要目标窗口正确地设置了消息接收事件监听器。其实，

痛点：如果不使用 postMessage。老旧页面与新框架之间只能靠全局变量或 window 对象传值，极易出现命名冲突、性能瓶颈还有难以维护的问题。话说回来，

基本语法

发送方：

window.postMessage;

接收方：

window.addEventListener {
const messageData = JSON.parse;console.log，});

演示一下

老框架中

从痛点来看。老代码混乱，JS 代码无法直接调用 React 组件；必须通过 DOM 操作触发交互。

Open React Modal

新框架

说到痛点，React 初始化需要 root 节点；需要监听来自旧程序的消息才能真正实现交互。

import React。{ useEffect,useState } from 'react';import './Modal.css';const Modal = => {
const = useState;const = useState;useEffect => {
const handleMessage = => {
if {
console.log;setData，// 设置数据
setIsVisible;// 打开弹窗
}
if {
console.log;}
}，window.addEventListener;return => window.removeEventListener;},)，const handleClose = => {
setIsVisible;setData，// 通知老程序已关闭弹窗
window.postMessage;}，return isVisible?(



brought by React

User ID: {data?.userId}

User Name: {data?.username}
<button onClick={handleClose}>Close Modal


)
: null;}，export default Modal;

效果预览

• #1 老程序点击 “Open React Modal” 按钮后新框架弹窗立即显示，并携带使用者数据。
• #2 点击弹窗中的 “Close Modal” 后React 会向旧程序发送确认消息，可进一步用于关闭或提示等操作。

自己动手试试