关于postmessage:窗口间通信方案postMessage

postMessage 是 html5 引入的 API，postMessage 办法容许来自 不同源 的脚本采纳异步形式进行通信，其实 同源不同页面 的脚本也能够采纳 postMessage 办法进行通信。

介绍

发送数据

须要在接收数据窗口的全局对象下调用该办法。

targetWindow.postMessage(message, targetOrigin, [transfer])

• targetWindow：指标窗口的 全局对象 援用，比方 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。
• message：将要发送到 指标窗口 的数据，能够是任何类型的数据。它将会被结构化克隆算法序列化。这意味着能够不受什么限度的将数据对象平安的传送给指标窗口而无需本人序列化。

• targetOrigin：指定指标窗口的 origin，只有指标窗口的 origin 与 targetOrigin 对应，指标窗口才能够接管到数据。

  • *：示意能够发送数据到任何 origin 的窗口，但通常处于安全性思考不倡议这么做。
  • /：示意能够发送给以后窗口的同源窗口。
• transfer：可选，是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给音讯的接管方，而发送一方将不再保有所有权。

接收数据

接收数据的窗口，监听 window 对象的 message 事件，从 event 对象里获取相干数据。

window.addEventListener('message', (event) => {const { data, origin, source} = event
  /* some code */
})

• data：从其余 window 中传递过去的数据。
• origin：发送窗口的 origin，一个由“协定“、“://“、“域名 ”、“: 端口号”拼接而成的字符串。
• source：对发送音讯的窗口对象的援用，能够应用此来在具备不同 origin 的两个窗口之间建设双向通信。

平安

发送数据的窗口，须要指定准确的指标窗口 origin，而不是 *。

接收数据的窗口，须要通过 event.origin 判断发送数据窗口的身份。

实例

两个窗口之间的通信