同一浏览器跨标签页跨域通信方案

假如一个需求需要A页和B页C页等进行相互通信，并且有第三个页打开时，接收之前的最后一条消息或是全部的历史消息，如何优雅的实现呢？

【跨标签页通信方案】

1. 通过监听storage 事件
2. 通过ShareWorker
3. BroadcastChannel

方案1：通过存储事件，会用多余的触发及清理消息的额外开销及存储极易被看到，个人感觉不是很理想

方案2 ： 貌似还不错，处理历史消息极其方便，关闭标签页也不存在清理历史消息的问题，

方案3： 这个API实现上极为方便，不足之处是浏览器支持不如前两个，safari 及IE不支持

以上3个方案都存在一个问题，跨域的问题，同源标签页可以，但是如果是跨域就需要额外处理，没有什么跨域问题是一个iframe 不能解决的，如果有那就放两个。

【ShareWorker 跨域 方案】

假如使用ShareWorker，首先在C域下放署一个中间页，它负责在C域下起一个ShareWorker, A域标签页通过iframe嵌入C域公共页，并在页面加载完成后初始化ShareWorker,并且开始监听来自ShareWorker 的消息，如果有消息则把消息通知给父页，A 页如果想要通知其它标签页消息，则通过iframe 将消息由C域下的页面 发到ShareWorker 再由ShareWorker 把消息转发给各自标签页的中间页，中间页再把消息通过iframe交给父页，简单的说是这样。说到底标签页相互通信主要靠的还是ShareWorker 的特性，iframe 只是解决跨域的桥梁，下面呼剩一下一件事情，那就是处理iframe 域通信，有了它，任意域名标签页都可能相互通信。

【ifrme跨域通信问题】

iframe  父子页同样存在跨域的问题，可靠的解决iframe 通信的手段有

1. PostMessage 父子页通过postMessage 来通信，这个方案兼容性极高IE8也支持 iframe PostMessage ，具体的不多说了，详见我的另一篇文章 localStorage 跨域解决方案，就是采用的这个方案实现跨域
2. Channel Messaging API  这个新出的api挺有意思的，和iframe postMessage 类似，这个不过是往端口postMessage,现在采用这个做个demo

ShareWorker结合 iframe 实现跨标签页跨域通信大功告成

具体代码参见github https://github.com/yyccmmkk/JS-browser-tab-bridge