JavaScript实现浏览器内多个标签页通信方式详解

// 发送消息的页面
localStorage.setItem('message', JSON.stringify({ text: 'Hello from Tab 1!' }));

// 接收消息的页面
window.addEventListener('storage', (event) => {
  if (event.key === 'message') {
    const message = JSON.parse(event.newValue);
    console.log('Received:', message.text); // 输出: "Hello from Tab 1!"
  }
});

// 发送消息的页面
const channel = new BroadcastChannel('my-channel');
channel.postMessage({ text: 'Hello from Tab 1!' });

// 接收消息的页面
const channel = new BroadcastChannel('my-channel');
channel.onmessage = (event) => {
  console.log('Received:', event.data.text); // 输出: "Hello from Tab 1!"
};

// SharedWorker 脚本（shared-worker.js）
self.onconnect = (event) => {
  const port = event.ports[0];
  port.onmessage = (e) => {
    // 收到消息后广播给所有连接的页面
    port.postMessage(e.data);
  };
};

// 发送消息的页面
const worker = new SharedWorker('shared-worker.js');
worker.port.postMessage({ text: 'Hello from Tab 1!' });

// 接收消息的页面
const worker = new SharedWorker('shared-worker.js');
worker.port.onmessage = (event) => {
  console.log('Received:', event.data.text); // 输出: "Hello from Tab 1!"
};

// 打开新页签并发送消息
const newTab = window.open('https://example.com/tab2');
newTab.postMessage({ text: 'Hello from Tab 1!' }, 'https://example.com');

// 接收消息的页面
window.addEventListener('message', (event) => {
  if (event.origin === 'https://example.com') {
    console.log('Received:', event.data.text); // 输出: "Hello from Tab 1!"
  }
});

// 发送消息的页面
const db = await openDB('my-db', 1);
await db.put('messages', { text: 'Hello from Tab 1!' });

// 接收消息的页面
const db = await openDB('my-db', 1);
db.on('changes', (changes) => {
  changes.forEach((change) => {
    if (change.type === 'put') {
      console.log('Received:', change.value.text); // 输出: "Hello from Tab 1!"
    }
  });
});

// Service Worker 脚本（sw.js）
self.addEventListener('message', (event) => {
  event.waitUntil(
    self.clients.matchAll().then((clients) => {
      clients.forEach((client) => {
        client.postMessage(event.data);
      });
    })
  );
});

// 发送消息的页面
navigator.serviceWorker.controller.postMessage({ text: 'Hello from Tab 1!' });

// 接收消息的页面
navigator.serviceWorker.addEventListener('message', (event) => {
  console.log('Received:', event.data.text); // 输出: "Hello from Tab 1!"
});