两个html页面之间通讯,面试官：前端跨页面通信，你知道哪些方法？

引言

在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。

正如下面这个例子：我在列表页点击“收藏”后，对应的详情页按钮会自动更新为“已收藏”状态；类似的，在详情页点击“收藏”后，列表页中按钮也会更新。

跨页面通信实例

这就是我们所说的前端跨页面通信。

你知道哪些跨页面通信的方式呢？如果不清楚，下面我就带大家来看看七种跨页面通信的方式。

一、同源页面间的跨页面通信

浏览器的同源策略在下述的一些跨页面通信方法中依然存在限制。因此，我们先来看看，在满足同源策略的情况下，都有哪些技术可以用来实现跨页面通信。

1. BroadCast Channel

BroadCast Channel 可以帮我们创建一个用于广播的通信频道。当所有页面都监听同一频道的消息时，其中某一个页面通过它发送的消息就会被其他所有页面收到。它的API和用法都非常简单。

下面的方式就可以创建一个标识为AlienZHOU的频道：

const bc = new BroadcastChannel('AlienZHOU');

各个页面可以通过onmessage来监听被广播的消息：

bc.onmessage = function (e) {

const data = e.data;

const text = '[receive] ' + data.msg + ' —— tab ' + data.from;

console.log('[BroadcastChannel] receive message:', text);

};

要发送消息时只需要调用实例上的postMessage方法即可：

bc.postMessage(mydata);

2. Service Worker

Service Worker 是一个可以长期运行在后台的 Worker，能够实现与页面的双向通信。多页面共享间的 Service Worker 可以共享，将 Service Worker 作为消息的处理中心(中央站)即可实现广播效果。

Service Worker 也是 PWA 中的核心技术之一，由于本文重点不在 PWA ，因此如果想进一步了解 Service Worker，可以阅读我之前的文章【PWA学习与实践】(3) 让你的WebApp离线可用。

首先，需要在页面注册 Service Worker：

/* 页面逻辑 */

navigator.serviceWorker.register('../util.sw.js').then(function () {

console.log('Service Worker 注册成功');

});

其中../util.sw.js是对应的 Service Worker 脚本。Service Worker 本身并不自动具备“广播通信”的功能，需要我们添加些代码，将其改造成消息中转站：

/* ../util.sw.js Service Worker 逻辑 */

self.addEventListener('message', function (e) {

console.log('service worker receive message', e.data);

e.waitUntil(

self.clients.matchAll().then(function (clients) {

if (!clients || clients.length === 0) {

return;

}

clients.forEach(function (client) {

client.postMessage(e.data);

});

})

);

});

我们在 Service Worker 中监听了message事件，获取页面(从 Service Worker 的角度叫 client)发送的信息。然后通过self.clients.matchAll()获取当前注册了该 Service Worker 的所有页面，通过调用每个client(即页面)的postMessage方法，向页面发送消息。这样就把从一处(某个Tab页面)收到的消息通知给了其他页面。

处理完 Service Worker，我们需要在页面监听 Service Worker 发送来的消息：

/* 页面逻辑 */

navigator.serviceWorker.addEventListener('message', function (e) {

const data = e.data;

const text = '[receive] ' + data.msg + ' —— tab ' + data.from;

console.log('[Service Worker] receive message:',