差点被发现叻
差点被发现叻

前端跨页面通信

跨页面通信主要分两大类

  • 同源页面间的跨页面通信
  • 非同源页面间的跨页面通信

同源页面间的跨页面通信

1.BroadCast Channel（广播式通信）

顾名思义，BroadCast Channel 会创建一个所有同源页面都可以共享的（广播）频道，故其中某个页面发送的消息可以被其他页面监听到

如何使用？
  • 创建一个用于广播的通信频道
const bc = new BroadcastChannel('broadCast')

该构造函数接受一个 DOMString 作为 name，用以标识这个 channel。在其他页面，可以通过传入相同的 name 来使用同一个广播通信。
这个 name 值可以通过实例的 .name 属性获得

console.log(bc.name)
// broadCast
  • 消息监听
    BroadCast Channel 创建完成后，就可以在页面监听广播的消息
bc.onmessage = function(e) {
    console.log('receive:', e.data);
};

对于错误也可以绑定监听

bc.onmessageerror = function(e) {
    console.warn('error:', e);
};

除了为 .onmessage 赋值这种方式，也可以使用 addEventListener 来添加 'message' 监听。

bc.addEventListener('message', function (e) {
     console.log('receive:', e.data);
})
  • 发送消息
    BroadCast Channel 实例也有一个对应的 postMessage 方法用于发送消息
bc.postMessage('hello')
  • 关闭广播
    上面的代码实现了多个页面间的广播通信，有时我们会希望取消当前页面的广播监听：
  1. 一种方式是取消或者修改相应的 'message' 事件监听
  2. 另一种更加简便的方式就是使用 BroadCast Channel 实例为我们提供的 close方法。
bc.close()

两者的区别在于，取消 'message' 监听只是让页面不对广播消息进行响应，BroadCast Channel 仍然存在；而调用 close 方法会切断与 BroadCast Channel 的连接，浏览器会尝试回收该对象，在关闭后调用 postMessage 会报错：Channel is closed,如果之后又在需要广播，需要重新创建一个相同 name 的 BroadCast Channel。

  • 兼容性
    BroadCast Channel 是一个非常好用的多页面消息同步 API, 但是兼容性却不是很乐观：
兼容性

2.LocalStorage

LocalStorage作为前端最常用的本地存储，大家应该非常熟悉了，但是 StorageEvent 这个和它相关的事件我们可能不太常用到。

如何使用？
  • 消息监听
    当 LocalStorage 发生变化是，会触发 storage 事件。利用这个特性。我们可以在发送消息时，把消息写入到某个 LocalStorage 中，然后在各个页面内，通过监听 storage事件即可收到通知。
window.addEventListener('storage', function(e) {
  if (e.key === 'localStorageData') {
    console.log('[Storage I] receive message:', e.newValue)
  }
})
  • 发送消息
    在需要监听的各个页面上添加以上代码，即可监听到 LocalStorage 的变化。当某个页面需要发送消息时，只需要使用我们熟悉的 setItem方法即可：
const data = {
    txt: 'hello',
    timeStamp: +(new Date)
}
window.localStorage.setItem('localStorageData', JSON.stringify(data));

这里有个细节就是我们在 data 上添加了一个时间戳，这是因为 storage 事件只有在值真正改变时才会触发，所以通过加时间戳来保证每次调用时一定会触发 storage 事件。

  • 兼容性
    LocalStorage的兼容性如下：
兼容性

3.Service Worker

Service Worker 是一个可以长期运行在后台的 Worker, 能够实现与页面的双向通信，将 Service Worker 作为消息的处理中心（中央站）即可实现广播效果。
Ps: Service Worker 也是 PWA的核心技术之一，但是本次分享重点不在 PWA，所以不做进一步展开。

如何使用？
  • 在页面注册 Service Worker （需先判断当前浏览器是否支持 Service Worker ，避免由于浏览器不兼容导致的 bug ）
if('serviceWorker' in window.navigator) {
    navigator.serviceWorker.register('./sw.js').then(function (registration) {
        console.log('success',registration)
    }).catch(function (err) {
        console.log('fail',err)
    })
  }

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

this.addEventListener('message', function (e) {
  e.waitUntil(
      this.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 方法，向页面发送消息，这样就把从一个页面收到的消息通知给了其他页面。

  • 消息接收
if('serviceWorker' in window.navigator) {
  navigator.serviceWorker.addEventListener('message',function (e) {
    console.log('[Service Worker] receive message:', e.data);
  })
}
  • 发送消息
    在向 Service Worker 发送消息时，我们需要在 serviceWorker 实例上调用 postMessage 方法，这里我们用到的是 navigator.serviceWorker.controller 
if('serviceWorker' in window.navigator && navigator.serviceWorker.controller){
  navigator.serviceWorker.controller.postMessage('hello')
}
  • 兼容性
    如下图所示， IE 和 Opera Mini 完全不支持，主流浏览器中 Edge 17以下不支持， Safair 和 IOS Safair 刚刚开始支持，而火狐和 Chrome 支持良好，大家在使用的时候最好还是做一下判断。
兼容性
总结

上面我们看到的三种实现跨页面通信的方式，不管是建立广播频道的 Broadcast Channel，还是使用 Service Worker 的消息中转站，或者是监听 storage 事件，都是“广播模式”：一个页面将消息通知给一个中央站，再由“中央站”通知给各个页面。
下面介绍的另外两种跨页面通信方式，本质是“共享存储 + 轮询模式”。

4.Shared Worker

Shared Worker 在实现跨页面通信的问题在于，它无法主动通知所有页面，因此我们需要使用轮询的方式来拉取最新的数据。

如何使用？
  • 在页面启动 Shared Worker
// 构造函数的第二个参数是 Shared Worker 名称，也可以留空
const sharedWorker = new SharedWorker('../util.shared.js', 'ctc');
  • 完善 util.shared.js
let data = null;
this.addEventListener('connect', function (e) {
    const port = e.ports[0];
    port.addEventListener('message', function (event) {
        // get 指令则返回存储的消息数据
        if (event.data.get) {
            data && port.postMessage(data);
        }
        // 非 get 指令则存储该消息数据
        else {
            data = event.data;
        }
    });
    port.start();
});
  • 消息监听
    在需要监听的页面定时发送 get 指令的消息给 Shared Worker，轮询最新的消息数据，并在页面监听返回的的信息：
// 定时轮询，发送 get 指令的消息
setInterval(function () {
  sharedWorker.port.postMessage({get: true})
}, 1000)

// 监听 get 消息的返回数据
sharedWorker.port.addEventListener('message',function (e) {
    console.log(e.data)
}, false)
sharedWorker.port.start()
  • 发送消息
sharedWorker.port.postMessage('hello');

注意：如果使用 addEventListener来添加 Shared Worker 的消息监听，需要显示调用 MessagePort.start 方法，即上文中的 sharedWorker.port.start()；如果使用 onmessage 绑定监听的话则不需要。

  • 兼容性
兼容性

5.IndexedDB

IndexedDB 与 Shared Worker 方案类似，消息发送方将消息存至 IndexedDB 中，接收方则通过轮询去获取最新的信息。

如何使用？
  • 打开数据库连接
function openStore() {
    const storeName = 'ctc_aleinzhou';
    return new Promise(function (resolve, reject) {
        if (!('indexedDB' in window)) {
            return reject('don\'t support indexedDB');
        }
        const request = indexedDB.open('CTC_DB', 1);
        request.onerror = reject;
        request.onsuccess =  e => resolve(e.target.result);
        request.onupgradeneeded = function (e) {
            const db = e.srcElement.result;
            if (e.oldVersion === 0 && !db.objectStoreNames.contains(storeName)) {
                const store = db.createObjectStore(storeName, {keyPath: 'tag'});
                store.createIndex(storeName + 'Index', 'tag', {unique: false});
            }
        }
    });
}
  • 存储数据
function saveData(db, data) {
    return new Promise(function (resolve, reject) {
        const STORE_NAME = 'ctc_aleinzhou';
        const tx = db.transaction(STORE_NAME, 'readwrite');
        const store = tx.objectStore(STORE_NAME);
        const request = store.put({tag: 'ctc_data', data});
        request.onsuccess = () => resolve(db);
        request.onerror = reject;
    });
}
  • 查询/读取数据
function query(db) {
    const STORE_NAME = 'ctc_aleinzhou';
    return new Promise(function (resolve, reject) {
        try {
            const tx = db.transaction(STORE_NAME, 'readonly');
            const store = tx.objectStore(STORE_NAME);
            const dbRequest = store.get('ctc_data');
            dbRequest.onsuccess = e => resolve(e.target.result);
            dbRequest.onerror = reject;
        }
        catch (err) {
            reject(err);
        }
    });
}
  • 在页面打开数据库，并初始化数据
openStore().then(db => saveData(db, null))
  • 消息监听
    在数据库连接并初始化后轮询
openStore().then(db => saveData(db, null)).then(function (db) {
    setInterval(function () {
        query(db).then(function (res) {
            if (res && res.data) {
                console.log('IndexedDB] receive message:', res.data);
            }
        });
    }, 1000);
});
  • 发送消息（向 IndexedDB 存储数据）
openStore().then(db => saveData(db, null)).then(function (db) {
    saveData(db, 'hello');
});
  • 兼容性
兼容性
总结

除了“广播模式”，我们又了解了“共享存储+长轮询”这种模式的两种方法，可能我们会觉得长轮询没有广播模式优雅，但实际上我们在使用“共享存储”形式时，不一定要搭配轮询。
例如在多 Tab 场景下，我们可能会离开 Tab A 到另一个 Tab B 中操作，过一会又切换到 Tab B，如果需要将之前在 Tab B 中操作的信息同步回来，只需在 Tab A 中监听 visibilitychange 这样的时间，来做一次信息同步即可。

非同源页面间的跨页面通信

  • 首先模拟场景，假设现在有两个不同源的页面，iframePage.html 和 index.html