跨域项目间数据通信

预计阅读时间: 2 分钟

使用场景

在非同源 [跨域] 项目间进行项目间的通信，一般是基于 iframe 或者 object 标签进行项目网址的嵌套，借助 postMessage 来进行项目间的数据通信工作。但是，在跨域的项目间进行数据通信时，需要进项相应的逻辑判断处理，来实现通讯的，一般有数据更新、token 等用户信息的时效性校验等方面，需要借助 postMessage 来实现数据通信。

使用方法

发送数据

代码示例

1// 数据：父窗口传值给子窗口
2const toChildData = { key: "fromParent", value: "fromParent" };
3
4// 子窗口：要打开窗口的实例
5const childTargetWindow = window.open("https://child.com", "_blank");
6
7// 检测子窗口是否加载
8if (childTargetWindow && !childTargetWindow.closed) {
9	childTargetWindow.postMessage(toChildData, "https://child.com");
10}

接收数据

代码示例

1window.addEventListener("message", event => {
2	// 检测消息来源
3	if (event.origin !== "https://child.com") {
4		return;
5	}
6	// 接收消息
7	const msgData = event.data;
8	console.log("接收消息：", msgData);
9});

提示

具体使用方法请查看MDN 官方文档，或postMessage 相关文档；

注意事项：

跨浏览器 tab 窗口通信时，使用 window.postMessage 时，需要检测消息来源，防止 open 的实例因刷新失效。在打开的子窗口中可以通过 domain.refer 获取 open 窗口的父级窗口源地址。
父级窗口在打开子窗口时，保存的浏览器对象实例，父级项目在刷新后将失效，需要通过 window.open 方法重新打开子窗口来创建对应 Window 实例。
跨域项目间数据通信时，健建议使用 iframe 标签内嵌网址的形式来金进行页面和组件直接的连接。从而更有效的进行数据交互。

#跨域项目间数据通信

#使用场景

#使用方法

#发送数据

#接收数据

#

跨域项目间数据通信

使用场景

使用方法

发送数据

接收数据