postMessage 的跨域通信

做过一个需求，在 PC 端有一个预览的小窗口。类似于这个样子

这个组件是一个表单类型的，输入信息，右侧的预览为iframe，显示的是在 H5 环境下的样式。

PC 和 H5 是两个不同的域名 a.com, b.com

很明显，跨域了。

解决的方案是通过 postMessage 来进行数据的传输。

MDN --- postMessage

window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为 https），端口号（443 为 https 的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

从广义上讲，一个窗口可以获得对另一个窗口的引用（比如 targetWindow = window.opener），然后在窗口上调用 targetWindow.postMessage() 方法分发一个 MessageEvent 消息。接收消息的窗口可以根据需要自由处理此事件 (en-US)。传递给 window.postMessage() 的参数（比如 message）将通过消息事件对象暴露给接收消息的窗口。

developer.mozilla.org/zh-CN/docs/…

PC

1. 获取页面上的 iframe，如果 data 有发生变化，那么就传递 data

useEffect(() => {
  let iframe = document.getElementById(IFRAME)
  if (iframe) {
    if (data) postMessageToH5(iframe, data)
  }
}, [data])

2. postMessage，判断当前的传入的元素是否为iframe。如果是，则调用 postMessage 发送信息。 postMessage(data,origin)方法接受两个参数：

• data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
• origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

const postMessageToH5 = (iframeElement, data) => {
  if (isIFrame(iframeElement) && iframeElement.contentWindow) {
    iframeElement.contentWindow.postMessage(JSON.stringify(data), targetOrigin)
  } else {
    throw new Error('ERROR')
  }
}

const isIFrame = (input) => input !== null && input.tagName === 'IFRAME'

const targetOrigin = '*'

H5

class PcToH5Messager {
  private h5MessageListener = null
  private options = null
  // 信任的域名
  private originList = ['https://a.com']
  constructor(options) {
    this.options = options
    this.h5MessageListener = (event) => {
      if (this.originList.includes(event.origin)) this.options?.onMessage(JSON.parse(event.data))
    }
    window.addEventListener('message', this.h5MessageListener, false)
  }

  destory() {
    window.removeEventListener('message', this.h5MessageListener, false)
  }
}

在需要的地方

data 即为 PC 传递的数据

useEffect(() => {
  const messager = new PcMessager({
    onMessage: (data) => {
      console.log('postMessage', data)
    }
  })
  return () => {
    messager.destory()
  }
}, [])