postMessage 跨域通信 iframe

需求背景：

iframe嵌套页面，需要进行参数传递，同时父与子是跨域（跨源）的。

核心方法：

window.postMessage() 方法可以安全地实现跨源通信。

otherWindow.postMessage(message, targetOrigin, [transfer]);

• otherWindow
  其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
• message
  将要发送到其他 window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。[1]
• targetOrigin
  通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI。

---

父给子传值：

• 父页面：

http://localhost:8080/

• 子页面：

http://localhost:8090/

注：
在第④步，会被连续调用两次，第一次是父页面postMessage的数据（父页面传递的参数在event.data中存放），第二次是子页面load后触发的。
如下图，
是第一个页面的event的值：（即父传递过来的）

下图是第二次触发的，即当前页面onload后的event值：

被调用两次的情况，可以通过判断 event.origin 源进行规避。

---

子给父传值：

• 父页面：

• 子页面：

返回的event值如下图：