浏览器不同源的页面之间如何跨域通信

1，需求

现在有2个项目，页面路径不同源。

• ToC 的收银台项目

类似在PC端京东淘宝，支付最后一步的收银台页面，可以选择不同支付工具付款。

• ToB 的后台管理项目

可以对收银台项目整体做一些配置：样式，支付工具相关的等等，配置项很多。

需求

1. 想要在后台管理项目中增删配置项后，能够实时预览收银台项目最终的展示效果
2. 展示效果符合预期，则提交修改配置项的审批电子流
3. 审批通过，上线

2，难点

因为2个项目的页面路径不同源，传递数据是个问题。

3，思路

首先，后台管理项目需要增加【预览】按钮，收银台项目需要增加【预览】页面。

1. 需要后端参与。收银台项目的相关配置项，本来就是通过接口获取的。所以再增加一个预览数据的接口，在预览页面调用获取数据。

2. 不需要后端参与。前端直接在2个页面之间通信。

第1种思路没有什么好说的，重点来说下第2种。

浏览器不同源的页面之间如何跨域通信？

1. 通过 url 传参。最简单直接，不过传递的数据大小有限。

2. postMessage，传递的数据大小我实测可以超200MB！（不知道极限，因为没再往上测试）

简单来说，我们可以获取从当前页面A通过window.open打开的页面B的引用 targetWindowB，然后在A页面通过 targetWindowB.postMessage() 向B页面分发消息。

再介绍下 window.open

简单说明：window.open 有3个参数，我们只关注前2个

1. strUrl：新页面的地址
2. strWindowName：新页面的名称，如果指定了该参数，则再次调用 window.open(strUrl, strWindowName) 时，不会再打开第2个新页面，而是跳转到打开的第1个页面并重新加载。（效果下面会有展示）

另外需要注意：调用window.open()方法以后，远程 URL 不会被立即载入，载入过程是异步的。
会有什么问题，看下实现过程就知道了。

4，实现

通过 vite 创建2个项目模拟，A 会向 B 发送数据。启动后的页面地址分别是：

1. A页面（后台管理项目 manage）http://localhost:5173
2. B页面（收银台项目 cashier）http://localhost:5174

第1版

A页面后台管理项目 manage

<script setup>
const cashierUrl = "http://localhost:5174";
const data = { name: "下雪天的夏风" };
let cashierWindow;

function init() {
  cashierWindow = window.open(cashierUrl, "cashierWindow");
  if (cashierWindow) {
    cashierWindow.postMessage(data, cashierUrl);
  }
}
</script>

<template>
  <h1>manage</h1>
  <button @click="init">发送预览数据</button>
</template>

B页面收银台项目 cashier

<script setup>
window.addEventListener(
  "message",
  function (event) {
    if (event.origin !== "http://localhost:5173") return;
    if (event.data) {
      console.log(event.data);
    }
  },
  false
);
</script>

<template>
  <h1>cashier</h1>
</template>

效果：

可以看到收银台项目并没有接收到消息！

原因就是：调用window.open()方法以后，远程 URL 不会被立即载入，载入过程是异步的。

换句话说，因为B页面还没有加载完成，message 事件还没有被绑定时，A页面已经把消息发送了。

第2版

延迟发送消息。

function init() {
  cashierWindow = window.open(cashierUrl, "cashierWindow");
  setTimeout(() => {
    if (cashierWindow) {
      const data = { name: "下雪天的夏风" };
      cashierWindow.postMessage(data, cashierUrl);
    }
  }, 1000);
}

效果：

B页面成功收到消息！

问题来了，因为这个测试用例比较简单，所以 1s B页面就会加载完成。
可面对复杂的页面+网络问题，A页面如何知道B页面已经加载完成了（message 事件绑定了）？

答案是：此时B页面可以通过 window.opener 获取 A页面的引用，使用 postMessage 向A页面发送数据！

实现思路：

1. B页面加载完成后，通过window.opener.postMessage() 向A页面发送一个约定字段。
2. A页面接收到约定字段后，再向B页面发送目标数据。

最终版

A页面后台管理项目 manage

<script setup>
import { ref } from "vue";
const cashierUrl = "http://localhost:5174";
const cashierLoaded = ref(false);
let cashierWindow;

function init() {
  cashierWindow = window.open(cashierUrl, "cashierWindow");
  if (cashierLoaded.value) {
    requestData();
  } else {
    window.addEventListener("message", receiveMessage, false);
  }
}

function receiveMessage(event) {
  if (event.origin !== cashierUrl) return;
  cashierLoaded.value = event.data === "__done__";
  requestData();
}

const data = { name: "下雪天的夏风" };
function requestData() {
  cashierWindow.postMessage(data, cashierUrl);
}
</script>

<template>
  <h1>manage</h1>
  <button @click="init">发送预览数据</button>
</template>

B页面收银台项目 cashier

<script setup>
const manageUrl = "http://localhost:5173";

if (window.opener) {
  window.opener.postMessage("__done__", manageUrl);
}

window.addEventListener(
  "message",
  function (event) {
    if (event.origin !== manageUrl) return;
    if (event.data) {
      console.log(event.data);
    }
  },
  false
);
</script>

<template>
  <h1>cashier</h1>
</template>

效果

其他的问题

1，页面路径需完全一致。

2个不同源页面通信时，要注意设置的 url 要完全一致才能接收到消息。例如 http://localhost:5174 和 http://localhost:5174/ 是不一样的！

2，事件注册问题

看下面的代码

function init() {
  cashierWindow = window.open(cashierUrl, "cashierWindow");
  if (cashierLoaded.value) {
    requestData();
  } else {
    window.addEventListener("message", receiveMessage, false);
  }
}

function receiveMessage(event) {
  if (event.origin !== cashierUrl) return;
  cashierLoaded.value = event.data === "__done__";
  requestData();
}

1. init 方法中，每次都要执行window.open 吗，不能把 cashierWindow 保存起来调用requestData 吗？

也可以这样做。但这个例子中是为了每次执行后，默认跳转到 B页面并刷新。

2. init 方法中，每次都要注册message 事件吗，万一打开的B页面加载较慢，又返回到A页面再次点击发送数据，岂不是又会再次注册事件吗？

确实会再次注册事件，不过没关系，因为注册相同的事件监听器，多余的监听器会被移除，只保留一个。参考
只保留一个的前提是：事件回调函数不能是匿名函数，否则还是会注册多个！所以把 receiveMessage 提取出来了。

我们来验证下最终版代码的效果：

而如果监听 message 事件这样写，

window.addEventListener(
    "message",
    // function receiveMessage(event) { // 效果一样
    function(event) {
      if (event.origin !== cashierUrl) return;
      cashierLoaded.value = event.data === "__done__";
      requestData();
    },
    false
  );

再来看下效果：

---

以上。如果对你有帮助，可以点赞支持下！