JavaScript中浏览器多标签页通信的8种方案盘点

// 页面A发送消息
localStorage.setItem('msg', JSON.stringify({ type: 'SYNC', data: 'Hello' }));

// 所有页面监听storage事件
window.addEventListener('storage', (e) => {
  if (e.key === 'msg') {
    const message = JSON.parse(e.newValue);
    console.log('收到消息:', message);
  }
});

// 创建频道
const channel = new BroadcastChannel('chat');

// 发送消息
channel.postMessage({ user: 'Alice', text: 'Hello!' });

// 接收消息
channel.onmessage = (e) => {
  console.log('收到广播:', e.data);
};

// shared-worker.js
const connections = [];
onconnect = (e) => {
  const port = e.ports[0];
  connections.push(port);
  
  port.onmessage = (event) => {
    // 广播给所有连接的页签
    connections.forEach(conn => {
      if (conn !== port) conn.postMessage(event.data);
    });
  };
};

// 页面使用
const worker = new SharedWorker('shared-worker.js');
worker.port.start();
worker.port.onmessage = (e) => {
  console.log('来自共享线程的消息:', e.data);
};

// 父页面向子页面发送消息
const iframe = document.getElementById('child-frame');
iframe.contentWindow.postMessage('secret', 'https://child.com');

// 子页面接收
window.addEventListener('message', (e) => {
  if (e.origin !== 'https://parent.com') return;
  console.log('跨域消息:', e.data);
});

// service-worker.js
self.addEventListener('message', (event) => {
  event.waitUntil(
    clients.matchAll().then((clients) => {
      clients.forEach(client => {
        client.postMessage(event.data);
      });
    })
  );
});

// 页面发送消息
navigator.serviceWorker.controller.postMessage('广播消息');

// 页面A设置Cookie
document.cookie = "msg=hello; path=/; max-age=60";

// 页面B轮询检查
setInterval(() => {
  const msg = document.cookie
    .split('; ')
    .find(row => row.startsWith('msg='))
    ?.split('=')[1];
  if (msg) {
    console.log('收到Cookie消息:', msg);
    document.cookie = "msg=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
  }
}, 1000);

// 页面A写入数据
const db = await idb.openDB('msgDB', 1);
await db.put('messages', { id: Date.now(), content: '新消息' });

// 页面B监听变化
const db = await idb.openDB('msgDB', 1);
db.on('changes', (changes) => {
  changes.forEach(change => {
    if (change.type === 'put') {
      console.log('数据库更新:', change.value);
    }
  });
});

// 公共WebSocket服务
const ws = new WebSocket('wss://message-server.com');

// 所有页签连接同一服务
ws.onmessage = (event) => {
  console.log('服务端中转消息:', event.data);
};

// 发送消息
ws.send(JSON.stringify({ 
  type: 'broadcast',
  payload: 'Hello all tabs!'
}));

class CollaborationCore {
  constructor() {
    this.channel = new BroadcastChannel('editor-sync');
    this.db = await idb.openDB('editorDB', 1, {
      upgrade(db) {
        db.createObjectStore('operations');
      }
    });
    
    this._initListeners();
  }

  // 发送编辑操作
  async sendOperation(op) {
    await this.db.put('operations', op, Date.now());
    this.channel.postMessage({ type: 'OPERATION', op });
  }

  // 监听消息
  _initListeners() {
    this.channel.onmessage = async (e) => {
      if (e.data.type === 'OPERATION') {
        this.applyOperation(e.data.op);
      }
    };
    
    // 处理离线期间的操作
    navigator.serviceWorker.addEventListener('message', (e) => {
      if (e.data.type === 'SYNC_OFFLINE_OPS') {
        e.data.ops.forEach(op => this.applyOperation(op));
      }
    });
  }
}

// 使用Web Crypto API加密
async function encryptMessage(message, key) {
  const encoded = new TextEncoder().encode(message);
  const iv = crypto.getRandomValues(new Uint8Array(12));
  const ciphertext = await crypto.subtle.encrypt(
    { name: 'AES-GCM', iv },
    key,
    encoded
  );
  return { iv, ciphertext };
}

// 基于RBAC的通信控制
const allowedRoles = ['editor', 'admin'];
function canSendMessage(user) {
  return allowedRoles.includes(user.role);
}

navigator.locks.request('resource', { mode: 'exclusive' }, async (lock) => {
  await updateSharedResource();
  // 锁自动释放
});

const sharedBuffer = new SharedArrayBuffer(1024);
const view = new Int32Array(sharedBuffer);

// 页签A
Atomics.store(view, 0, 123);

// 页签B
console.log(Atomics.load(view, 0)); // 123