一、同源页面
1.广播站模式
一个页面将消息通知给一个“中央站”，再由“中央站”通知给各个页面，以下会介绍这个中央站可以是
LocalStorage，可以是BroadCast Channel实例，也可以是一个Service worker
1.1.LocalStorage+StorageEvent
前端最常用的本地存储，localStorage变化会触发storage事件，通过监听storage事件就可以收到通知
<script>window.addEventListener('storage', function (e) {if (e.key === 'zhengzhou') {const newValue = JSON.parse(e.newValue)const oldValue = JSON.parse(e.oldValue)console.log('data', newValue, oldValue)}})const mydata = { name: '小芳', age: 23 }mydata.st = +new Date()window.localStorage.setItem('zhengzhou', JSON.stringify(mydata))
</script>
去浏览器的local缓存中修改值，就会触发storage事件
1.2.BroadCast Channel
广播频道：用于同源不同页面之间完成通信的功能
const bc = new BroadcastChannel('zhengzhou')
bc.postMessage('敬个礼，握握手，我们都是好朋友')
bc.onmessage = function (e) {console.log('data', e)
}
// bc.close() // 关闭通道
接下来你就可以在浏览器打开两个tab页愉快的进行通讯啦。。。
1.3.Service worker
多页面共享，service worker作为消息处理中心可实现广播的效果：可长期运行在后台的worker中，能够实现与页面的双向通行（等待探索），也是PWA：渐进式网页应用程序的核心技术之一
2.共享存储+轮询模式
2.1.IndexedDB/Cookie
在移动端中，由于使用的是Webview，可以使用Webview提供的Cookie共享功能实现。
在前后端分离的项目中，可以使用JWT（Json Web Token）来进行身份验证，并用它来代替Cookie来实现跨域共享
2.2.Shared Worker
Worker家族的一个家庭成员：Share Worker：跨页面通信时无法主动通知所有的页面，所以我们采用轮询的方式来拉取最新的数据。shared worder实现简单的聊天室
支持两种消息
1.post：share worker收到后将数据保存下来
2.get：share worker收到消息后将保存的数据通过postMessage传给注册他的页面，也就是让页面通过get来主动获取（同步）消息
3.口口相传模式
3.1.window.open+window.opener
4.基于服务端
4.1.websocket
4.2.comet
4.3.SSE
二、非同源页面通信
使用用户不可见的iframe作为桥，由于iframe与父页面组件可以通过origin来忽略同源限制，因此可以在页面中嵌入iframe
iframe通信也非常的简单
// 监听消息
window.addEventListener('message',function(e){})
// 发送消息
window.frames[0].window.postMessage({name:'小芳',age:23},*) // 第二个参数也可以设置为iframe的url
// 发送消息
window.frames[0].window.postMessage({name:'小芳',age:23},*) // 第二个参数也可以设置为iframe的url
// iframe接收消息后可以在所有iframe间同步消息
// 例如使用Broadcast channel
const bc = new BroadcastChannel('zhengzhou')
// 接收到页面消息后，在iframe间进行广播
window.addEventListener('message',function(e){bc.postMessage(e.data)
})
// 其他iframe页面接收到通知后，将消息同步给所属页面
bc.onmessage=function(e){window.parent.postMessage(e.data,'*')
}
