跨页面通信方式

1. 父子页面通信

父子页面有两种，iframe嵌套的和window.open打开的。window.open打开的页面，在窗口模式时，被打开的页面就是当前页面的子页面，
tab模式时，只是形式不一样，也是子页面，可以通过window.opener来访问父页面。

iframe的通信方式: window.name, window.hash, postMessage

window.open的通信方式: postMessage

其中postMessage通信是最简单实现双向通信的方式。

2. 同域页面通信

非父子页面，同域通信可用方式

1. LocalStorage  监听storage事件，全兼容

2. BroadcastChannel  chrome 54+  safari 15.4+

3. SharedWorker   chrome 5+ safari 16+  SharedWorker 是一个在后台运行的线程，会在没有连接的标签页时继续存在，而 BroadcastChannel 只在有连接的标签页时才有　　　　                                                                效， SharedWorker 可用来共享状态，所有页面可共用一个状态

3. 跨域页面通信

两个同域的独立页面通信可以使用localStorage，兄弟页面监听storage事件就行了。

两个跨域的独立页面可以使用一个birdge页面当做桥梁，做同域通信，两个页面分别用iframe嵌套它，用postMessage做跨域通信，就实现了两个跨域页面的通信。

具体如下图
                    postMessage                                            　  storage                                                postMessage
tab A <-------------------> iframe A [birdge.html] <-------------> iframe B [birdge.html] <------------------> tab B