前端跨页面通信，你知道哪些方法？

一、同源页面

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>
1
2
3
4
5
6
7
8
9
10
11
12

去浏览器的local缓存中修改值，就会触发storage事件

1.2.BroadCast Channel

广播频道：用于同源不同页面之间完成通信的功能

const bc = new BroadcastChannel('zhengzhou')
bc.postMessage('敬个礼，握握手，我们都是好朋友')
bc.onmessage = function (e) {
  console.log('data', e)
}
// bc.close() // 关闭通道
1
2
3
4
5
6

接下来你就可以在浏览器打开两个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
1
2
3
4

// 发送消息
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,'*')
}
1
2
3
4
5
6
7
8
9
10
11
12
13