什么是前端跨页面通信
在浏览器中，我们同时打开多个tab页，每个tab页可以粗略的理解为一个独立的运行环境，即使是全局对象也不会在多个tab间共享。然后我们希望这些独立的tab页之间同步数据、信息或状态。
比如：我们同时打开了列表页和a的详情页，在列表页对a的状态进行操作后，我们切到详情的tab页，在不进行刷新页面时，要怎么把在列表页操作后的状态同步过来？
Broadcast channel
BroadcastChannel 接口代理了一个命名频道，可以让指定 origin 下的任意 browsing context 来订阅它。它允许同源的不同浏览器窗口，Tab页，frame或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件，消息可以广播到所有监听了该频道的 BroadcastChannel 对象。
- 可以通过 BroadcastChannel() 创建一个链接到命名频道的对象
- 属性： name
- Event: message\ messageerror
- 方法： close()/postMessage()
// 创建一个 test1 的频道
const bc = new BroadcastChannel('test1')
console.log(bc.name) // test1
// 各个页面可以通过 onmessage 来监听被广播的消息
bc.onmessage = function(e) {
const data = e.data
}
// 发送消息时调用 postMessage 方法
bc.postMessage({from: 'other', msg});
// 关闭频道对象，告诉它不要再接收新的消息，并允许它最终被垃圾回收
bc.close()
注：同一个tab也发送的消息，该tab页监听不到
localStorage
当前页面使用的 storage 被其他页面修改时会触发 StorageEvent 事件。利用这个特性，我们可以在发送消息时，把消息写到 localStorage/sessionStorage 中，然后在各个页面内，通过监听 storage 事件即可收到通知。
属性：
- key：该属性代表被修改的键值。当被clear()方法清除之后该属性值为null。
- newValue：该属性代表修改后的新值。当被clear()方法清理后或者该键值对被移除，newValue 的值为 null
- oldValue：该属性代表修改前的原值。在设置新键值对时由于没有原始值，该属性值为 null
- storageArea：被操作的storage对象
- url：key发生改变的对象所在文档的URL地址
// 在各页面去通过监听 storage 事件去接收消息
window.addEventListener('storage', (e) => {
if (e.key === 'localStorage-msg') {
let data = JSON.parse(e.newValue)
let msgEle = document.createElement('p')
msgEle.innerHTML = data.date + ' ' + data.from + ': ' + data.msg
receiveEle.appendChild(msgEle)
}
})
// localStorage
window.localStorage.setItem('localStorage-msg', msg)
// sessionStorage
// window.sessionStorage.setItem('sessionStorage-msg', msg)
localStorage和sessionStorage区别：
- 存储在localStorage的数据可以长期保存；sessionStorage的数据在关闭当前页面时就会被清除。localStorage 可能因清除不及时引发问题
- 打开多个相同的URL tabs页时，会创建各自的sessionStorage，而localstorage只要在相同的协议、主机名和端口号，就能读取/修改同一份localStorage数据。sessionStorage只适用于iframe 的数据同步。
Service Worker
Service workers 本质上充当 Web 应用程序、浏览器与网络（可用时）之间的代理服务器，可以长期运行在后台，能够实现与页面的双向通信。多页面共享间的 Service Worker 可以共享，将 Service Worker 作为消息的处理中心（中央站）即可实现广播效果。
Service Worker 并不自动具备“广播通信”的功能，需要改造 Service Worker 的运行脚本，将其改造成消息中转站。在 Service Worker 中监听message事件，获取页面发送的信息。然后通过 self.clients.matchAll() 获取当前注册了 Service Worker 的所有页面，通过调用每个client的 postMessage 方法，向页面发送消息。这样就把从一处（某个Tab页面）收到的消息通知给了其他页面。
简单来说：就是通过worker和主线程之间能双向通信的特性，在worker脚本中接收到来自主线程的消息时，就将接收的消息发送给所有注册了该线程的页面
// page1.html
// 在页面注册 service worker
navigator.serviceWorker.register('./serviceWorker.js').then(() => {
console.log('Service Worker 注册成功');
})
// 在页面中监听 service Worker 发来的消息
navigator.serviceWorker.addEventListener('message', (e) => {
const data = e.data;
let msgEle = document.createElement('p')
msgEle.innerHTML = data.date + ' ' + data.from + ': ' + data.msg
receiveEle.appendChild(msgEle)
})
// 发送消息
btnSend.addEventListener('click', () => {
let msg = {
from: 'page 1',
msg: sendEle.value,
date: new Date().toLocaleString()
}
// 调用service worker 的 postMessage方法发送消息
navigator.serviceWorker.controller.postMessage(msg)
})
// serviceworker.js
self.addEventListener('message', (e) => {
console.log('serviceworker message', e)
e.waitUntil(
// self.clients.matchAll() 获取当前注册了该 service Worker 的所有页面
self.clients.matchAll().then((clients) => {
if(!clients || clients.length === 0) {
return
}
// clients 中记录了每一个tab页/iframe都记录在里面
clients.forEach((client) => {
console.log(7777, client)
client.postMessage(e.data)
})
})
)
})
SharedWorker
SharedWorker 接口代表一种特定类型的 worker，可以从几个浏览上下文中访问，例如几个窗口、iframe 或其他 worker。它们实现一个不同于普通 worker 的接口，具有不同的全局作用域，如果要使 SharedWorker 连接到多个不同的页面，这些页面必须是同源的。同一个 js url 只会创建一个SharedWorker，其他页面内使用同样的url创建sharedWorker，会复用已创建的worker。
- 通过SharedWorker()构造函数创建一个执行指定url脚本的共享 web worker
- 创建完SharedWorker() 会返回一个MessagePort 对象来访问worker，这个对象用SharedWorker.port 属性获得
- 如果已经用 addEventListener 监听了 onmessage 事件，则可以使用 start() 方法手动启动端口
- 在执行脚本中使用 onconnect 处理程序连接到相同端口
实现思路：简单来说，我们创建的这个共享线程是可以跟主线程进行双向通信的，利用这个特性，我们在worker 脚本里去收集所有共享了这个worker线程的端口，每当收到来自主线程的消息时，就就将收到的消息发送给所有共享了这个脚本的端口
// page.html 页面
if (!window.SharedWorker) {
alert("浏览器不支持SharedWorkder!")
} else {
// 创建一个共享进场对象
let myWorker = new SharedWorker("./worker.js")
// 通过监听 port.onmessage 监听worker的返回消息
myWorker.port.onmessage = function(e) {
console.log(5555, e)
let msgEl = document.createElement("p")
let data = e.data;
msgEl.innerText = data.date + " " + data.from + ":" + data.message
messagesEle.appendChild(msgEl)
};
btnSend.addEventListener("click", () => {
let message = messageEl.value
// 发送消息，将消息发送到 worker
myWorker.port.postMessage({
date: new Date().toLocaleString(),
message,
from: "page 1"
})
});
// 手动开启端口：启动发送该端口的消息队列；在未调用之前，发往该端口的消息都在队列中等待
myWorker.port.start()
// worker.js
// 通过这个worke.js 的脚本，实现让worker向多个页面发送消息， 讲port缓存在一个数组里，当需要向所有页面广播消息时，就遍历数组发送消息
let portList = []
onconnect = function(e) {
let port = e.ports[0]
// 在connect时将 port添加到 portPool中
ensurePorts(port)
port.onmessage = function(e) {
let data = e.data
// 将消息发送到每一个注册了该脚本的页面
broadcast(data)
}
port.start()
}
function ensurePorts(port) {
if (portList.indexOf(port) < 0) {
portList.push(port);
}
}
// 一个tab页是一个port，相同的两个tab页，在一个页面发送消息时，另一个页面也可以收到消息
function broadcast(msg) {
portList
.filter(port => selfPort !== port)
.forEach(port => port.postMessage(msg))
}
window.open + window.opener
当我们使用window.open打开页面时，方法会返回一个被打开页面window的引用。而在未显示指定noopener时，被打开的页面可以通过window.opener获取到打开它的页面的引用 ， 通过这种方式我们就将这些页面建立起了联系（一种树形结构），通过这个树形结构我们可以实现一种“口口相传”的模式来实现跨页面通信。
let windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures])
- strUrl：要在新打开的窗口中加载的URL
- strWindowName：新窗口的名称
- strWindowFeatures：一个可选参数，列出新窗口的特征(大小，位置，滚动条等)作为一个DOMString
- windowObjectReference : 打开的新窗口对象的引用,如果父子窗口满足“同源策略”，你可以通过这个引用访问新窗口的属性或方法
<body>
<h3>windowopen Page 1</h3>
<input type="button" value="page2" id="open-p2" />
<input type="button" value="page2-2" id="open-p2-2" />
<section style="margin-top:50px; text-align: center">
<input id="inputMessage" value="page 1的测试消息" />
<input type="button" value="发送消息" id="btnSend" />
<section id="messages">
<p>收到的消息：</p>
</section>
</section>
<script>
let receiveEle = document.getElementById("messages");
let sendEle = document.getElementById("inputMessage");
let btnSend = document.getElementById("btnSend");
let btnOpen = document.getElementById('open-p2')
let btnOpen2 = document.getElementById('open-p2-2')
// 把我们用window.open 打开的页面用pageList收集起来
let pageList = []
btnOpen.addEventListener('click', () => {
const win = window.open('./page2.html')
pageList.push(win)
})
btnOpen2.addEventListener('click', () => {
const win = window.open('./page2-2.html')
pageList.push(win)
})
// 发送消息
btnSend.addEventListener('click', () => {
let msg = sendEle.value
sendParents(msg)
sendChile(msg)
})
// 传消息给用 window.open 打开该页面的页面-- 父页面
function sendParents(msg) {
if(window.opener && !window.opener.closed){
msg.fromOpener = true
window.opener.postMessage({
fromOpener: true,
msg
})
}
}
// 传消息给被该页面用 window.open 打开的页面
function sendChile(msg) {
pageList
.filter(w => !w.closed)
.forEach(w => {
console.log('send', w)
w.postMessage({
fromOpener: false,
msg
})
})
}
// 页面监听 message，当接收到消息后，在向其他页面传递改消息
window.addEventListener('message', (e) => {
console.log('message', e)
const data = e.data
if(data.fromOpener) {
sendParents(data.msg)
} else {
sendChile(data.msg)
}
let msgEle = document.createElement('p')
msgEle.innerHTML = `${data.fromOpener ? '来自子页面' : '来自父页面'}：${data.msg}`
receiveEle.appendChild(msgEle)
})
</script>
</body>
注：页面只监听得到父页面和子页面发送的消息，祖先页面和兄弟页面是监听不到的，所以在接收消息时要进行特殊处理。在页面进行强制刷新后，页面间会失去关联，导致无法再进行通信。
postMessage
window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号，以及主机时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。
otherWindow.postMessage(message, targetOrigin, [transfer])
- otherWindow：其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames
- message：将要发送到其他 window的数据
- targetOrigin：指定哪些窗口能接收到消息事件，其值可以是 *（表示无限制）或者一个 URI
- transfer：可选，是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。
上面window.open 实现同源的跨页面通信就是通过 postMessage 来实现的，下面我们来看一下如何实现非同源多页面之间的通信呢？
注： postMessage 实现跨页面通信的前提条件是两个tab也之间有 “父子”关系，所以单靠 postMessage 是无法实现的。
实现思路：在需要实现非同源跨页面通信的页面都去用 iframe 标签内嵌一个不可见的 iframe.html 页面，在页面与 iframe.html 页面间，我们使用 postMessage 来实现父子页面间的非同源跨页面通信，在 iframe.html 里实现同源的跨页面通信，从而实现非同源的多页面间的跨页面通信。
<!-- // 父页面 -->
<body>
<h3>跨域 Page 1</h3>
<section style="margin-top:50px; text-align: center">
<input id="inputMessage" value="page 1的测试消息" />
<input type="button" value="发送消息" id="btnSend" />
<section id="messages">
<p>收到的消息：</p>
</section>
</section>
<iframe src="http://www.kuayu-iframe.com/iframe.html" id="child" style="opacity: 0;"></iframe>
<script>
// 创建一个标识为 bcc-msg 的频道
let receiveEle = document.getElementById("messages");
let sendEle = document.getElementById("inputMessage");
let btnSend = document.getElementById("btnSend");
// 跨域传递消息时
btnSend.addEventListener('click', () => {
let msg = sendEle.value
// 父页面给iframe子页面发送消息
window.frames[0].postMessage({
from: 'p1',
msg
}, 'http://www.kuayu-iframe.com/')
})
window.addEventListener('message', (e) => {
console.log('fromIframe', e)
const data = e.data.data
let msgEle = document.createElement('p')
msgEle.innerHTML = data.from + ': ' + data.msg
receiveEle.appendChild(msgEle);
})
</script>
</body>
<!-- // iframe.html 页面 -->
<body>
<script>
// 创建一个标识为 bcc-msg 的频道
let bc = new BroadcastChannel('kuayu-msg')
// 监听通过postMessage发送来的消息
window.addEventListener('message', (e) => {
const data = e.data
// 将接收到的消息，通过 Broadcast Channel 广播给其他tab页里的iframe
bc.postMessage({
from: 'iframe',
data
})
})
// 监听个iframe tab 页 传来的消息
bc.onmessage = function(e) {
const data = e.data
// 从iframe页面将消息传递给父页面
window.parent.postMessage(e.data, '*')
}
</script>
</body>
总结：
- 广播模式：Broadcast Channe / Service Worker / StorageEvent / Shared Worker
- 口口相传模式：window.open + window.opener/postMessage
- 基于服务端：websocket / 轮询请求
各API实现跨页面的优缺点：
- Broadcast Channel：实时通信，随时关闭频道，功能全面；浏览器支持效果不好（IE-都不支持，chrome-54）
- storageEvent：浏览器支持效果好、API直观。部分浏览器隐身模式下，无法设置localStorage（如safari）。可能因LocalStorage清理不及时而引起问题
- shareworker：异步处理，不占用主线程，不用 ie 浏览器的话，还是非常推荐的（IE-都不支持）
- serviceworker：浏览器支持度不高，开启service worker可能会导致浏览器的缓存数据大大增加（IE-都不支持）
- window.open + window.opener：实现方式不优雅，无法形成统一的解决方案，且在强制刷新页面后会失去关联导致无法通信；实现简单，浏览器兼容性好
- postMessage：点对点通信，局限性比较大，可扩展性比较差。
扫一扫
941
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
