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

在瀏覽器中，我們可以同時打開多個Tab頁，每個Tab頁可以粗略理解為一個“獨立”的運行環境，即使是全局對象也不會在多個Tab間共享。然而有些時候，我們希望能在這些“獨立”的Tab頁面之間同步頁面的數據、信息或狀態。

正如下面這個例子：我在列表頁點擊“收藏”后，對應的詳情頁按鈕會自動更新為“已收藏”狀態；類似的，在詳情頁點擊“收藏”后，列表頁中按鈕也會更新。

這就是我們所說的前端跨頁面通信。

你知道哪些跨頁面通信的方式呢？如果不清楚，下面我就帶大家來看看七種跨頁面通信的方式。

---

一、同源頁面間的跨頁面通信

以下各種方式的 在線 Demo 可以戳這里 >>

瀏覽器的同源策略在下述的一些跨頁面通信方法中依然存在限制。因此，我們先來看看，在滿足同源策略的情況下，都有哪些技術可以用來實現跨頁面通信。

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);

　　

Broadcast Channel 的具體的使用方式可以看這篇《【3分鍾速覽】前端廣播式通信：Broadcast Channel》。

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:', text);

});

　　

最后，當需要同步消息時，可以調用 Service Worker 的postMessage方法：

/* 頁面邏輯 */

navigator.serviceWorker.controller.postMessage(mydata);

　　

3. LocalStorage

LocalStorage 作為前端最常用的本地存儲，大家應該已經非常熟悉了；但StorageEvent這個與它相關的事件有些同學可能會比較陌生。

當 LocalStorage 變化時，會觸發storage事件。利用這個特性，我們可以在發送消息時，把消息寫入到某個 LocalStorage 中；然后在各個頁面內，通過監聽storage事件即可收到通知。

window.addEventListener('storage', function (e) {

    if (e.key === 'ctc-msg') {

        const data = JSON.parse(e.newValue);

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

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

    }

});

　　

在各個頁面添加如上的代碼，即可監聽到 LocalStorage 的變化。當某個頁面需要發送消息時，只需要使用我們熟悉的setItem方法即可：

mydata.st = +(new Date);

window.localStorage.setItem('ctc-msg', JSON.stringify(mydata));

　　

注意，這里有一個細節：我們在mydata上添加了一個取當前毫秒時間戳的.st屬性。這是因為，storage事件只有在值真正改變時才會觸發。舉個例子：

window.localStorage.setItem('test', '123');

window.localStorage.setItem('test', '123');

　　

由於第二次的值'123'與第一次的值相同，所以以上的代碼只會在第一次setItem時觸發storage事件。因此我們通過設置st來保證每次調用時一定會觸發storage事件。

小憩一下

上面我們看到了三種實現跨頁面通信的方式，不論是建立廣播頻道的 Broadcast Channel，還是使用 Service Worker 的消息中轉站，抑或是些 tricky 的storage事件，其都是“廣播模式”：一個頁面將消息通知給一個“中央站”，再由“中央站”通知給各個頁面。

在上面的例子中，這個“中央站”可以是一個 BroadCast Channel 實例、一個 Service Worker 或是 LocalStorage。

下面我們會看到另外兩種跨頁面通信方式，我把它稱為“共享存儲+輪詢模式”。

---

4. Shared Worker

Shared Worker 是 Worker 家族的另一個成員。普通的 Worker 之間是獨立運行、數據互不相通；而多個 Tab 注冊的 Shared Worker 則可以實現數據共享。

Shared Worker 在實現跨頁面通信時的問題在於，它無法主動通知所有頁面，因此，我們會使用輪詢的方式，來拉取最新的數據。思路如下：

讓 Shared Worker 支持兩種消息。一種是 post，Shared Worker 收到后會將該數據保存下來；另一種是 get，Shared Worker 收到該消息后會將保存的數據通過postMessage傳給注冊它的頁面。也就是讓頁面通過 get 來主動獲取（同步）最新消息。具體實現如下：

首先，我們會在頁面中啟動一個 Shared Worker，啟動方式非常簡單：

// 構造函數的第二個參數是 Shared Worker 名稱，也可以留空

const sharedWorker = new SharedWorker('../util.shared.js', 'ctc');

　　

然后，在該 Shared Worker 中支持 get 與 post 形式的消息：

/* ../util.shared.js: Shared Worker 代碼 */

let data = null;

self.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', (e) => {

    const data = e.data;

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

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

}, false);

sharedWorker.port.start();

　　

最后，當要跨頁面通信時，只需給 Shared Worker postMessage即可：

sharedWorker.port.postMessage(mydata);

　　

注意，如果使用addEventListener來添加 Shared Worker 的消息監聽，需要顯式調用MessagePort.start方法，即上文中的sharedWorker.port.start()；如果使用onmessage綁定監聽則不需要。

5. IndexedDB

除了可以利用 Shared Worker 來共享存儲數據，還可以使用其他一些“全局性”（支持跨頁面）的存儲方案。例如 IndexedDB 或 cookie。

鑒於大家對 cookie 已經很熟悉，加之作為“互聯網最早期的存儲方案之一”，cookie 已經在實際應用中承受了遠多於其設計之初的責任，我們下面會使用 IndexedDB 來實現。

其思路很簡單：與 Shared Worker 方案類似，消息發送方將消息存至 IndexedDB 中；接收方（例如所有頁面）則通過輪詢去獲取最新的信息。在這之前，我們先簡單封裝幾個 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) {

                return;

            }

            const data = res.data;

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

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

        });

    }, 1000);

});

　　

最后，要發送消息時，只需向 IndexedDB 存儲數據即可：

openStore().then(db => saveData(db, null)).then(function (db) {

    // …… 省略上面的輪詢代碼

    // 觸發 saveData 的方法可以放在用戶操作的事件監聽內

    saveData(db, mydata);

});

　　

小憩一下

在“廣播模式”外，我們又了解了“共享存儲+長輪詢”這種模式。也許你會認為長輪詢沒有監聽模式優雅，但實際上，有些時候使用“共享存儲”的形式時，不一定要搭配長輪詢。

例如，在多 Tab 場景下，我們可能會離開 Tab A 到另一個 Tab B 中操作；過了一會我們從 Tab B 切換回 Tab A 時，希望將之前在 Tab B 中的操作的信息同步回來。這時候，其實只用在 Tab A 中監聽visibilitychange這樣的事件，來做一次信息同步即可。

下面，我會再介紹一種通信方式，我把它稱為“口口相傳”模式。

---

6. window.open + window.opener

當我們使用window.open打開頁面時，方法會返回一個被打開頁面window的引用。而在未顯示指定noopener時，被打開的頁面可以通過window.opener獲取到打開它的頁面的引用 —— 通過這種方式我們就將這些頁面建立起了聯系（一種樹形結構）。

首先，我們把window.open打開的頁面的window對象收集起來：

let childWins = [];

document.getElementById('btn').addEventListener('click', function () {

    const win = window.open('./some/sample');

    childWins.push(win);

});

　　

然后，當我們需要發送消息的時候，作為消息的發起方，一個頁面需要同時通知它打開的頁面與打開它的頁面：

// 過濾掉已經關閉的窗口

childWins = childWins.filter(w => !w.closed);

if (childWins.length > 0) {

    mydata.fromOpenner = false;

    childWins.forEach(w => w.postMessage(mydata));

}

if (window.opener && !window.opener.closed) {

    mydata.fromOpenner = true;

    window.opener.postMessage(mydata);

}

　　

注意，我這里先用.closed屬性過濾掉已經被關閉的 Tab 窗口。這樣，作為消息發送方的任務就完成了。下面看看，作為消息接收方，它需要做什么。

此時，一個收到消息的頁面就不能那么自私了，除了展示收到的消息，它還需要將消息再傳遞給它所“知道的人”（打開與被它打開的頁面）:

需要注意的是，我這里通過判斷消息來源，避免將消息回傳給發送方，防止消息在兩者間死循環的傳遞。（該方案會有些其他小問題，實際中可以進一步優化）

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

    const data = e.data;

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

    console.log('[Cross-document Messaging] receive message:', text);

    // 避免消息回傳

    if (window.opener && !window.opener.closed && data.fromOpenner) {

        window.opener.postMessage(data);

    }

    // 過濾掉已經關閉的窗口

    childWins = childWins.filter(w => !w.closed);

    // 避免消息回傳

    if (childWins && !data.fromOpenner) {

        childWins.forEach(w => w.postMessage(data));

    }

});

　　

這樣，每個節點（頁面）都肩負起了傳遞消息的責任，也就是我說的“口口相傳”，而消息就在這個樹狀結構中流轉了起來。

小憩一下

顯然，“口口相傳”的模式存在一個問題：如果頁面不是通過在另一個頁面內的window.open打開的（例如直接在地址欄輸入，或從其他網站鏈接過來），這個聯系就被打破了。

除了上面這六個常見方法，其實還有一種（第七種）做法是通過 WebSocket 這類的“服務器推”技術來進行同步。這好比將我們的“中央站”從前端移到了后端。

關於 WebSocket 與其他“服務器推”技術，不了解的同學可以閱讀這篇《各類“服務器推”技術原理與實例（Polling/COMET/SSE/WebSocket）》

此外，我還針對以上各種方式寫了一個 在線演示的 Demo >>

二、非同源頁面之間的通信

上面我們介紹了七種前端跨頁面通信的方法，但它們大都受到同源策略的限制。然而有時候，我們有兩個不同域名的產品線，也希望它們下面的所有頁面之間能無障礙地通信。那該怎么辦呢？

要實現該功能，可以使用一個用戶不可見的 iframe 作為“橋”。由於 iframe 與父頁面間可以通過指定origin來忽略同源限制，因此可以在每個頁面中嵌入一個 iframe （例如：http://sample.com/bridge.html），而這些 iframe 由於使用的是一個 url，因此屬於同源頁面，其通信方式可以復用上面第一部分提到的各種方式。

頁面與 iframe 通信非常簡單，首先需要在頁面中監聽 iframe 發來的消息，做相應的業務處理：

/* 業務頁面代碼 */

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

    // …… do something

});

　　

然后，當頁面要與其他的同源或非同源頁面通信時，會先給 iframe 發送消息：

/* 業務頁面代碼 */

window.frames[0].window.postMessage(mydata, '*');

　　

其中為了簡便此處將postMessage的第二個參數設為了'*'，你也可以設為 iframe 的 URL。iframe 收到消息后，會使用某種跨頁面消息通信技術在所有 iframe 間同步消息，例如下面使用的 Broadcast Channel：

/* iframe 內代碼 */

const bc = new BroadcastChannel('AlienZHOU');

　　

 // 收到來自頁面的消息后，在 iframe 間進行廣播 window.addEventListener('message', function (e) { bc.postMessage(e.data); }); 

其他 iframe 收到通知后，則會將該消息同步給所屬的頁面：

/* iframe 內代碼 */ // 對於收到的（iframe）廣播消息，通知給所屬的業務頁面

bc.onmessage = function (e) {

    window.parent.postMessage(e.data, '*');

};

　　

下圖就是使用 iframe 作為“橋”的非同源頁面間通信模式圖。

其中“同源跨域通信方案”可以使用文章第一部分提到的某種技術。

---

總結

今天和大家分享了一下跨頁面通信的各種方式。

對於同源頁面，常見的方式包括：

• 廣播模式：Broadcast Channe / Service Worker / LocalStorage + StorageEvent

• 共享存儲模式：Shared Worker / IndexedDB / cookie

• 口口相傳模式：window.open + window.opener

• 基於服務端：Websocket / Comet / SSE 等

而對於非同源頁面，則可以通過嵌入同源 iframe 作為“橋”，將非同源頁面通信轉換為同源頁面通信。

作者：AlienZHOU
鏈接：https://www.imooc.com/article/284318?block_id=tuijian_wz
來源：慕課網
本文原創發布於慕課網 ，轉載請注明出處，謝謝合作