JavaScript中跨標簽頁通信的常見方式

更新時間：2023年10月31日 08:30:06 作者：前端俊剛

跨標簽頁通信是指在瀏覽器中的不同標簽頁之間進行數(shù)據(jù)傳遞和通信的過程,這篇文章為大家整理了幾個常見的跨標簽頁通信方式,感興趣的小伙伴可以了解下

引言

跨標簽頁通信是指在瀏覽器中的不同標簽頁之間進行數(shù)據(jù)傳遞和通信的過程。在傳統(tǒng)的Web開發(fā)中，每個標簽頁都是相互獨立的，無法直接共享數(shù)據(jù)。然而，有時候我們需要在不同的標簽頁之間進行數(shù)據(jù)共享或者實現(xiàn)一些協(xié)同操作，這就需要使用跨標簽頁通信來實現(xiàn)。

常見的跨標簽頁方案

BroadCast Channel
Service Worker
LocalStorage window.onstorage 監(jiān)聽
window.open、window.postMessage
Shared Worker 定時器輪詢（ setInterval ）
IndexedDB 定時器輪詢（ setInterval ）
cookie 定時器輪詢（ setInterval ）
Websocket

前面4種方式可見: 跨標簽頁通信的8種方式（上）

本文介紹后面4種

Shared Worker

Shared Worker 是一種在多個瀏覽器標簽頁之間共享的 JavaScript 線程。它可以用于實現(xiàn)跨標簽頁的通信。

SharedWorker 接口代表一種特定類型的 worker，可以從幾個瀏覽上下文中訪問，例如幾個窗口、iframe 或其他 worker。它們實現(xiàn)一個不同于普通 worker 的接口，具有不同的全局作用域，

備注： 如果要使 SharedWorker 連接到多個不同的頁面，這些頁面必須是同源的（相同的協(xié)議、host 以及端口）。

兼容性

下面是一個使用 Shared Worker 進行通信的示例：

在主頁面中：

// 創(chuàng)建一個 Shared Worker
const worker = new SharedWorker('worker.js');

// 監(jiān)聽來自 Shared Worker 的消息
worker.port.onmessage = function(event) {
  console.log('Received message from worker:', event.data);
};

// 向 Shared Worker 發(fā)送消息
worker.port.postMessage('Hello from main page!');

在 worker.js 文件中：

// 監(jiān)聽來自主頁面的消息
self.onconnect = function(event) {
  const port = event.ports[0];
  
  // 監(jiān)聽來自主頁面的消息
  port.onmessage = function(event) {
    console.log('Received message from main page:', event.data);
    
    // 向主頁面發(fā)送消息
    port.postMessage('Hello from shared worker!');
  };
};

IndexedDB

IndexedDB 是一種底層 API，用于在客戶端存儲大量的結(jié)構(gòu)化數(shù)據(jù)（也包括文件/二進制大型對象（blobs））。該 API 使用索引實現(xiàn)對數(shù)據(jù)的高性能搜索。雖然 Web Storage 在存儲較少量的數(shù)據(jù)很有用，但對于存儲更大量的結(jié)構(gòu)化數(shù)據(jù)來說力不從心。而 IndexedDB 提供了這種場景的解決方案。

IndexedDB 是一個事務型數(shù)據(jù)庫系統(tǒng)，類似于基于 SQL 的 RDBMS。然而，不像 RDBMS 使用固定列表，IndexedDB 是一個基于 JavaScript 的面向?qū)ο髷?shù)據(jù)庫。IndexedDB 允許你存儲和檢索用鍵索引的對象；可以存儲結(jié)構(gòu)化克隆算法支持的任何對象。你只需要指定數(shù)據(jù)庫模式，打開與數(shù)據(jù)庫的連接，然后檢索和更新一系列事務。

使用 IndexedDB 執(zhí)行的操作是異步執(zhí)行的，以免阻塞應用程序。

IndexedDB 是瀏覽器提供的一種本地數(shù)據(jù)庫，可以用于在多個標簽頁之間共享數(shù)據(jù)?？梢允褂?setInterval 定時輪詢 IndexedDB 來實現(xiàn)跨標簽頁通信。下面是一個示例：

在發(fā)送消息的標簽頁中：

// 打開或創(chuàng)建 IndexedDB 數(shù)據(jù)庫
const request = indexedDB.open('messageDatabase', 1);

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  
  // 創(chuàng)建一個對象存儲空間用于存儲消息
  db.createObjectStore('messages', { keyPath: 'id', autoIncrement: true });
};

request.onsuccess = function(event) {
  const db = event.target.result;
  
  // 向數(shù)據(jù)庫中添加一條新消息
  const transaction = db.transaction(['messages'], 'readwrite');
  const objectStore = transaction.objectStore('messages');
  
  const message = { content: 'Hello from sender!' };
  
  objectStore.add(message);
  
  transaction.oncomplete = function() {
    console.log('Message sent successfully!');
    
    // 關(guān)閉數(shù)據(jù)庫連接
    db.close();
  };
};

request.onerror = function(event) {
  console.error('Error opening database:', event.target.error);
};

在接收消息的標簽頁中：

// 打開或創(chuàng)建 IndexedDB 數(shù)據(jù)庫
const request = indexedDB.open('messageDatabase', 1);

request.onsuccess = function(event) {
  const db = event.target.result;
  
  // 創(chuàng)建一個定時器，每隔一段時間輪詢數(shù)據(jù)庫中的消息
  setInterval(function() {
    // 創(chuàng)建一個事務
    const transaction = db.transaction(['messages'], 'readwrite');
    const objectStore = transaction.objectStore('messages');
    
    // 獲取存儲在對象存儲中的所有消息
    const request = objectStore.getAll();
    
    request.onsuccess = function(event) {
      const messages = event.target.result;
      
      // 處理消息
      messages.forEach(function(message) {
        console.log('Received message:', message.content);
        
        // 在處理完消息后，刪除該消息
        objectStore.delete(message.id);
      });
      
      // 關(guān)閉事務
      transaction.oncomplete = function() {
        console.log('Messages processed successfully!');
      };
    };
    
    request.onerror = function(event) {
      console.error('Error retrieving messages:', event.target.error);
      
      // 關(guān)閉事務
      transaction.abort();
    };
  }, 1000);
};

request.onerror = function(event) {
  console.error('Error opening database:', event.target.error);
};

在上述示例中，我們創(chuàng)建了一個名為 "messageDatabase" 的 IndexedDB 數(shù)據(jù)庫，并在其中創(chuàng)建了一個名為 "messages" 的對象存儲空間用于存儲消息。在發(fā)送消息的標簽頁中，我們向數(shù)據(jù)庫中添加一條新消息。而在接收消息的標簽頁中，我們創(chuàng)建了一個定時器，每隔一段時間輪詢數(shù)據(jù)庫中的消息，并處理這些消息。處理完消息后，我們將其從數(shù)據(jù)庫中刪除。

請注意，在實際應用中，您可能需要更復雜的邏輯來處理跨標簽頁通信，并確保數(shù)據(jù)同步和一致性。此示例僅提供了一個基本的框架來演示如何使用 IndexedDB 實現(xiàn)跨標簽頁通信。

cookie

Cookie 是一種在瀏覽器和服務器之間傳遞的小型文本文件，可以用于在多個標簽頁之間共享數(shù)據(jù)。可以使用 setInterval 定時輪詢 Cookie 來實現(xiàn)跨標簽頁通信。下面是一個示例：

在發(fā)送消息的標簽頁中：

// 設(shè)置一個 Cookie，將消息存儲在 Cookie 中
document.cookie = 'message=Hello from sender!';

在接收消息的標簽頁中：

// 創(chuàng)建一個定時器，每隔一段時間輪詢 Cookie 中的數(shù)據(jù)
setInterval(function () {
  // 獲取存儲在 Cookie 中的消息
  const cookies = document.cookie.split(';')
  let message = ''

  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim()

    if (cookie.startsWith('message=')) {
      message = cookie.substring('message='.length)
      break
    }
  }

  // 處理消息
  if (message) {
    console.log('Received message:', decodeURIComponent(message))

    // 清除 Cookie
    document.cookie = 'message=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'
  }
}, 1000)

在上述示例中，我們在發(fā)送消息的標簽頁中設(shè)置了一個名為 "message" 的 Cookie，并將消息存儲在其中。而在接收消息的標簽頁中，我們創(chuàng)建了一個定時器，每隔一段時間輪詢 Cookie 中的數(shù)據(jù)。通過解析和處理 Cookie，我們可以獲取到存儲的消息，并進行相應的處理。處理完消息后，我們清除了該 Cookie。請注意，在使用 Cookie 進行跨標簽頁通信時，需要注意以下幾點：

跨域名通信：Cookie 默認只能在同一域名下共享。如果需要在不同域名下進行跨標簽頁通信，需要設(shè)置合適的域名和路徑。
Cookie 大小限制：Cookie 的大小有限制，通常為幾 KB。如果消息較大，可能需要拆分成多個 Cookie 進行存儲。
安全性考慮：Cookie 中的數(shù)據(jù)可以被用戶和其他腳本訪問和修改。因此，不適合存儲敏感信息。以上示例提供了一個基本的框架來演示如何使用 Cookie 實現(xiàn)跨標簽頁通信。在實際應用中，您可能需要更復雜的邏輯來處理跨標簽頁通信，并確保數(shù)據(jù)同步和一致性。

websocket

Websocket 是一種在瀏覽器和服務器之間進行全雙工通信的協(xié)議，可以用于實現(xiàn)實時的跨標簽頁通信。下面是一個使用 Websocket 進行通信的示例：

在發(fā)送消息的標簽頁中：

// 創(chuàng)建一個 WebSocket 連接
const socket = new WebSocket('ws://example.com');
// 監(jiān)聽連接成功的事件
socket.onopen = function() {
 // 發(fā)送消息到服務器
  socket.send('Hello from sender!');
};

在接收消息的標簽頁中：

// 創(chuàng)建一個 WebSocket 連接
const socket = new WebSocket('ws://example.com');
// 監(jiān)聽來自服務器的消息
socket.onmessage = function(event) {
  console.log('Received message:', event.data);
};

在服務器端：

// 創(chuàng)建一個 WebSocket 服務器
const WebSocketServer = require('ws').Server
const wss = new WebSocketServer({ port: 8080 })
// 監(jiān)聽來自客戶端的連接
wss.on('connection', function (socket) {
  // 監(jiān)聽來自客戶端的消息
  socket.on('message', function (message) {
    console.log('Received message:', message)

    // 向所有客戶端發(fā)送消息
    wss.clients.forEach(function (client) {
      client.send(message)
    })
  })
})

在上述示例中，我們在發(fā)送消息的標簽頁中創(chuàng)建了一個 WebSocket 連接，并在連接成功后發(fā)送一條消息到服務器。而在接收消息的標簽頁中，我們也創(chuàng)建了一個 WebSocket 連接，并監(jiān)聽來自服務器的消息。當服務器收到來自任何客戶端的消息時，它會將該消息廣播給所有連接的客戶端。

總結(jié)

這些通信方式各有優(yōu)劣，選擇適合的方式取決于具體的需求和場景。Shared Worker 和 Websocket 提供了實時性和雙向通信的能力，適用于需要實時更新和交互的應用。IndexedDB 和 Cookie 則適用于需要存儲和同步數(shù)據(jù)的場景，但相對于實時性較差。根據(jù)具體需求，可以選擇合適的通信方式來實現(xiàn)跨標簽頁的通信。

到此這篇關(guān)于JavaScript中跨標簽頁通信的常見方式的文章就介紹到這了,更多相關(guān)JavaScript跨標簽頁通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: