场景：浏览器两个不同标签页之间，需要跨域通信。

通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。

方案一 url拼接

可以通过url后面拼接相关参数的方式进行通信。
不过这个方法有挺多不好之处。
第一：把数据参数都暴露在url里，不够安全。
第二：数据大小受限制。第一点可以通过加密提高安全系数，不过第二点，url的地址是有大小限制的，而且不用的浏览器的url大小最大总长度也是有所区别。当需要传递的数据比较大的时候，这个方法就没法使用了。

方案二 postMessage

window对象有一个postMessage方法。正确使用时，能安全的实现两个不用浏览器标签页通信。

window.postMessage(message, targetOrigin, [transfer]);
message
将要发送到其他 window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。[1]
targetOrigin
通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；例如，当用postMessage传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的origin属性完全一致，来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的targetOrigin，而不是*。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。
transfer 可选
是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

2.1 源浏览器标签窗口传数据给新浏览器标签窗口（源=>新）

源浏览器窗口标签脚本

// newWindow 为打开的新窗口对象的引用
let newWindow = window.open(url)
newWindow.postMessage({msg:"hello"}, "*");

新浏览器窗口脚本标签

// 监听message
window.addEventListener('message',(e)=>{
   let message = e.data
})
//或者使用
window.onmessage = (e)=>{
   let message = e.data
}
// message为 {msg:"hello"}

2.2 新浏览器标签窗口传数据给原浏览器标签窗口（新=>源）

源浏览器窗口脚本

// 监听message
window.addEventListener('message',(e)=>{
   let message = e.data
})
//或者使用
window.onmessage = (e)=>{
   let message = e.data
}
// 最后message为 {msg:"world"}

新浏览器窗口脚本

window.opener.postMessage({msg:"world"},'*')

2.3 结合使用

现实中打开一个新标签窗口到完成渲染是需要一定的时间的，如果过早使用了postMessage方法，onmessage会无法监听到数据。所以这里结合来使用，在新的标
签窗口渲染完了，通知一下源标签窗口。

源浏览器窗口脚本

let newWindow = null
newWindow = window.open(url);

window.onmessage = (e)=>{
  // 当接收到新浏览器窗口init信息后，才开始发送消息
  if(e.data.type == 'init'){
    newWindow.postMessage({msg:"hello"}, "*");
  }
}

新浏览器窗口脚本

window.onload = (e)=>{
  window.onmessage = (e)=>{
    let message = e.data
  }
  // 防止不是通过window.open创建的
  if(window.opener){
    window.opener.postMessage({type:"init"},"*")
  }
}