`postMessage()` 和 `message` 事件

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

参考代码:

通过网盘分享的文件：postmessage-demo.7z 链接: https://pan.baidu.com/s/1skF0hvowHOgf0MoM3eVc0w?pwd=idw6 提取码: idw6

通常因为同源策略, 两个不同的页面中的 JavaScript 无法进行互相通信.

1. 用法说明

基本模型:

基本用法:

在 Page1 中获得 Page2 的 Window 引用 (targetWindow).
通过 targetWindow 调用 postMessage() 来发送消息.
在 Page2 中注册 message 事件.

当在 Page1 中, 利用 targetWindow.postMessage() 发送消息时, 会触发 Page2 中的 message 事件.

注意事项:

postMessage() 方法签名: otherWindow.postMessage(message, targetOrigin[, transfer])
- message 参数是结构化数据, 可以是对象和基本数据类型.
- targetOrigin 用于安全控制, 可以是主机名, 也可以是 '*', 表示哪个站点可以接收该消息.
通常, 在 Page1 中是通过 iframe 或 window.open() 来获得 Page2 的引用.
- 例如: const targetWindow = window.open('...')
- 或者: const targetWindow = iframe.contentWindow
从 Page1 发送消息给 Page2, 还需要确保 Page2 能正常加载. 所以一般会考虑延迟执行 postMessage.

一句话概述: 在当前页面中, 获得其他页面的引用, 使用该引用调用 postMessage(), 在另一个页面中注册 message 事件, 来接收 postMessage 的消息.

这里移除了保证 secondary-site 加载预留的 500 毫秒等待, 因此将 sendMessage 放在 iframe 的 load 事件中. 但是该方式存在一个问题, 即二次弹窗后, 不再触发 load 事件, 则会导致不会发送对一个消息. 这一点根据需求俩确定是否需要二次触发. 亦或者在 Modal 组件中配置关闭模态框时清除所有元素, 这样再次开启模态框时就会触发 load 事件了.

实际上逻辑也应如此, 如果缓存了 iframe 引用的页面, 二次打开的时候未新创建页面, 也无需再次发送初始化消息, 出发每次都需要发送消息, 可以考虑其他技术方案. 也可以判断是否为新开或二开, 分别使用 load 事件, 或直接调用. 这一点与 Modal 组件的 :destroy-on-close 配合设置.

二次打开的日志记录

然后移除 secondary-site 中注册的事件, 再测试

3. 封装

类型定义

enum MessageType {
  ACK,
  Normal
}

interface PostMessage<T = any> {
  msgId: string | number;
  msgType: MessageType;
  data?: T
}

interface PostMessageOptions {
  targetWindow: WindowProxy;
  origin?: string;
  retries?: number;
  waitTime?: number;
}

定义消息发送方法

function postMessageFn<T = any>(message: T, opts: PostMessageOptions) {
  log('postMessageFn: %O, %O', message, opts)
  let tries = opts.retries ?? 5
  let timespan = opts.waitTime ?? 1000
  let confirm = false

  const origin = opts.origin ?? '*'

  const msgId = +new Date
  const data: PostMessage<T> = {
    msgId: msgId,
    msgType: MessageType.Normal,
    data: message
  }

  function sendMessage() {
    if (confirm) return
    if (tries <= 0) throw new Error('发送失败: 多次尝试消息发送无响应')
    tries--
    log('(%s) 发送消息: %O', tries, data)
    opts.targetWindow.postMessage(data, origin)
    setTimeout(sendMessage, timespan)
  }

  function ackReceive(e: MessageEvent<PostMessage>) {
    log('ackReceive: %O', e)
    if ((origin !== '*' && e.origin == origin || true)
      && e.data.msgId == msgId 
      && e.data.msgType == MessageType.ACK
    ) {
      window.removeEventListener('message', ackReceive)
      confirm = true
    }
  }

  window.addEventListener('message', ackReceive)

  setTimeout(sendMessage, 500) 
}

执行消息发送

const openModalHandler = () => {
  log('打开模态框 Step1: %O', iframeRef.value)
  openModalStatus.value = true
  log('打开模态框 Step2: %O', iframeRef.value)
  nextTick(() => {
    log('打开模态框 Step3: %O', iframeRef.value)

    if(iframeRef.value) {
      postMessageFn({
        content: '发送的消息'
      }, {
        targetWindow: iframeRef.value.contentWindow as WindowProxy
      })
    }
  })
}

目标网站的代码为 (未封装)

enum MessageType {
  ACK,
  Normal
}

interface PostMessage<T = any> {
  msgId: string | number;
  msgType: MessageType;
  data?: T
}

function receiveMessage(e: MessageEvent<PostMessage>) {
  log('receiveMessage(%s): %O', e.origin, e)

  if (e.origin === 'http://localhost:19001' && e.data?.msgType == MessageType.Normal) {
    log('接收到 http://localhost:19001 的消息: %O', e)
    // 处理消息
    // ...

    // 回执
    const srcWindow = e.source as WindowProxy
    const ack: PostMessage = {
      msgId: e.data.msgId,
      msgType: MessageType.ACK,
    }
    srcWindow.postMessage(ack, e.origin)
    log('发送回执消息(to: %s): %O', e.origin, ack)
  }
}

onMounted(() => {
  log('onMounted')
  window.addEventListener('message', receiveMessage)
})

onUnmounted(() => {
  log('onUnmounted')
  window.removeEventListener('message', receiveMessage)
})

运行结果为

如果将目标站点的 message 事件移除再测试

`postMessage()` 和 `message` 事件

1. 用法说明

2. 基于 `Vue` + `AntdVue` 的案例

2.1 详细步骤分解 - 前期准备

2.1.1 创建两个项目

2.2.2 清理项目模板中的文件

2.2.3 安装必要的模块

2.2 详细步骤分解 - 收发消息

2.2.1 在 `secondary-site` 中注册 `message` 事件

2.2.3 在打开模态框时发送消息

`:force-render="false"`

`:force-render="true"`

2.3 详细步骤分解 - 补充说明

2.3.1 在目标 `message` 事件中过滤源

注意

2.3.2 ACK

2.3.2.1 首先定义消息类型

2.3.2.2 目标站点返回 ACK 消息

2.3.2.3 发送消息时注册 `message` 事件

2.3.2.4 重复发送

3. 封装