前端解决跨域问题的N种方法之postMessage

平时会不会有一个需求是 我在打开不一样域网站的时候 要把个人某个变量数据传递过去 方法有不少不少种 今天介绍下postMessage

H5 postMessage

语法

otherWindow.postMessage(message, targetOrigin);

otherWindow

• 其余窗口的一个引用，好比iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames

参数(message, targetOrigin)

• message: 将要发送到其余
  window的数据。将会被结构化克隆算法序列化。这意味着你可不受什么限制的安全传送数据对象给目标窗口而无需本身序列化

• targetOrigin：(MDN上的解释比较长，简而言之)字符串参数，指明目标窗口的源

看下例子

aaa.html

bbb.html

看一下打印出来的e的内容

相对重要属性以下

• data：是传递来的message

• source：发送消息的窗口对象

• origin：发送消息窗口的源（协议+主机+端口号）

附上个人订阅号二维码，欢迎关注，一块儿学前端