2478 字
12 分钟
前端跨页面通信完全指南
2025-11-03
Web 开发
JavaScript
/
Web API
/
跨页面通信
/
BroadcastChannel
/
SharedWorker
/
localStorage

简介#

前端跨页面通信是现代 Web 应用中的常见需求，例如在多个标签页之间同步用户状态、实时更新数据等。本文将详细介绍各种跨页面通信方法，包括它们的实现原理、适用场景和最佳实践。

1. localStorage + storage 事件#

最常用的跨标签页通信方式，通过监听 storage 事件来实现页面间的消息传递。

基本用法#

// 页面A - 发送消息
localStorage.setItem('message', JSON.stringify({
  type: 'user-login',
  data: { userId: 123, timestamp: Date.now() }
}));


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

封装通信类#

class StorageMessenger {
  constructor(channel = 'default-channel') {
    this.channel = channel;
    this.listeners = new Set();
    this.init();
  }


  init() {
    window.addEventListener('storage', (e) => {
      if (e.key === this.channel && e.newValue) {
        try {
          const message = JSON.parse(e.newValue);
          this.listeners.forEach(listener => listener(message));
        } catch (error) {
          console.error('Parse message error:', error);
        }
      }
    });
  }


  send(message) {
    const data = {
      ...message,
      timestamp: Date.now(),
      origin: window.location.href
    };
    localStorage.setItem(this.channel, JSON.stringify(data));
    // 清理，避免storage满
    setTimeout(() => localStorage.removeItem(this.channel), 100);
  }


  onMessage(callback) {
    this.listeners.add(callback);
    return () => this.listeners.delete(callback);
  }
}


// 使用示例
const messenger = new StorageMessenger('app-channel');
messenger.send({ type: 'notification', data: 'User logged in' });
messenger.onMessage((msg) => console.log('Received:', msg));

特点#

  • 同源限制：只能在同源页面间通信
  • 事件触发：仅在其他页面修改时触发，自己页面不触发
  • 兼容性：兼容性好，支持所有现代浏览器
  • 存储限制：受 localStorage 5-10MB 的存储限制

2. BroadcastChannel API#

专门为同源页面间广播通信设计的 API，提供了更简洁的接口。

基本用法#

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


// 页面A - 发送消息
channel.postMessage({
  type: 'notification',
  data: 'User logged in'
});


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


// 关闭频道
channel.close();

实用封装#

class BroadcastMessenger {
  constructor(channelName = 'default') {
    this.channel = new BroadcastChannel(channelName);
    this.handlers = new Map();


    this.channel.onmessage = (event) => {
      const { type, data } = event.data;
      if (this.handlers.has(type)) {
        this.handlers.get(type).forEach(handler => handler(data));
      }
    };
  }


  emit(type, data) {
    this.channel.postMessage({ type, data });
  }


  on(type, handler) {
    if (!this.handlers.has(type)) {
      this.handlers.set(type, new Set());
    }
    this.handlers.get(type).add(handler);
  }


  off(type, handler) {
    if (this.handlers.has(type)) {
      this.handlers.get(type).delete(handler);
    }
  }


  destroy() {
    this.channel.close();
    this.handlers.clear();
  }
}


// 使用示例
const messenger = new BroadcastMessenger('user-events');
messenger.on('login', (data) => console.log('User logged in:', data));
messenger.emit('login', { userId: 123 });

特点#

  • API 简洁：专为广播设计，使用方便
  • 同源限制：只能用于同源页面通信
  • 浏览器支持：Safari 15.4+ 才支持，需要考虑兼容性

3. SharedWorker#

多页面共享的 Worker，可以维护共享状态和实现复杂的通信逻辑。

基本实现#

shared-worker.js
const connections = new Set();


onconnect = (e) => {
  const port = e.ports[0];
  connections.add(port);


  port.onmessage = (event) => {
    // 广播给所有连接的页面
    connections.forEach(p => {
      if (p !== port) {
        p.postMessage(event.data);
      }
    });
  };


  // 处理断开连接
  port.start();
};

页面使用#

// 创建 SharedWorker
const worker = new SharedWorker('./shared-worker.js');


// 发送消息
worker.port.postMessage({
  type: 'user-action',
  data: 'clicked button'
});


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

状态共享示例#

shared-worker-with-state.js
let sharedState = {
  users: [],
  messages: [],
  activeCount: 0
};


const ports = new Set();


onconnect = (e) => {
  const port = e.ports[0];
  ports.add(port);
  sharedState.activeCount = ports.size;


  port.onmessage = (event) => {
    const { type, data } = event.data;


    switch(type) {
      case 'GET_STATE':
        port.postMessage({
          type: 'STATE_UPDATE',
          data: sharedState
        });
        break;


      case 'UPDATE_STATE':
        sharedState = { ...sharedState, ...data };
        // 广播状态更新给所有页面
        broadcastState();
        break;


      case 'ADD_MESSAGE':
        sharedState.messages.push(data);
        broadcastState();
        break;
    }
  };


  // 处理断开
  port.addEventListener('close', () => {
    ports.delete(port);
    sharedState.activeCount = ports.size;
    broadcastState();
  });
};


function broadcastState() {
  ports.forEach(port => {
    port.postMessage({
      type: 'STATE_UPDATE',
      data: sharedState
    });
  });
}

特点#

  • 共享上下文：真正的共享内存和状态
  • 持久连接：保持与多个页面的持久连接
  • 浏览器支持：Safari 不支持，需要降级方案

4. Service Worker + Clients API#

利用 Service Worker 作为中心化的消息分发器。

Service Worker 实现#

service-worker.js
self.addEventListener('message', async (event) => {
  // 获取所有客户端
  const clients = await self.clients.matchAll({
    includeUncontrolled: true,
    type: 'window'
  });


  // 广播消息给其他客户端
  clients.forEach(client => {
    if (client.id !== event.source.id) {
      client.postMessage(event.data);
    }
  });
});


// 处理特定类型的消息
self.addEventListener('message', async (event) => {
  const { type, data } = event.data;


  if (type === 'SYNC_STATE') {
    // 同步状态逻辑
    const clients = await self.clients.matchAll();
    clients.forEach(client => {
      client.postMessage({
        type: 'STATE_UPDATED',
        data
      });
    });
  }
});

页面代码#

// 注册 Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('./sw.js').then(reg => {
    console.log('Service Worker registered');
  });


  // 发送消息
  if (navigator.serviceWorker.controller) {
    navigator.serviceWorker.controller.postMessage({
      type: 'broadcast',
      data: 'Hello all tabs'
    });
  }


  // 接收消息
  navigator.serviceWorker.addEventListener('message', (e) => {
    console.log('收到SW消息:', e.data);
  });
}

特点#

  • 离线支持：Service Worker 可以离线工作
  • 生命周期复杂：需要处理安装、激活等生命周期
  • 功能强大：可以结合缓存、推送等功能

5. postMessage（iframe/window.open）#

用于有窗口引用关系的页面间通信，支持跨域。

窗口通信#

// 父页面打开子窗口
const popup = window.open('child.html');


// 发送消息给子窗口
popup.postMessage({ msg: 'Hello child' }, '*');


// 子窗口发送给父窗口
window.opener.postMessage({ msg: 'Hello parent' }, '*');

iframe 通信#

// 父页面与 iframe 通信
const iframe = document.getElementById('myFrame');


// 发送消息到 iframe
iframe.contentWindow.postMessage({
  type: 'command',
  data: 'update'
}, '*');


// iframe 内部发送消息到父页面
parent.postMessage({
  type: 'response',
  data: 'updated'
}, '*');

安全接收消息#

window.addEventListener('message', (e) => {
  // 验证消息来源
  if (e.origin !== 'https://trusted.com') {
    return;
  }


  // 验证消息格式
  if (!e.data || typeof e.data !== 'object') {
    return;
  }


  console.log('收到可信消息:', e.data);
});

特点#

  • 跨域支持：支持跨域通信
  • 需要引用：需要窗口引用关系
  • 安全考虑：需要验证消息来源

6. 其他通信方式#

IndexedDB 轮询#

通过 IndexedDB 作为共享存储，配合轮询实现通信。

class IDBMessenger {
  constructor(dbName = 'MessageDB') {
    this.dbName = dbName;
    this.init();
  }


  async init() {
    const request = indexedDB.open(this.dbName, 1);


    request.onupgradeneeded = (e) => {
      const db = e.target.result;
      if (!db.objectStoreNames.contains('messages')) {
        db.createObjectStore('messages', {
          keyPath: 'id',
          autoIncrement: true
        });
      }
    };


    this.db = await new Promise((resolve, reject) => {
      request.onsuccess = () => resolve(request.result);
      request.onerror = reject;
    });


    // 轮询检查新消息
    this.startPolling();
  }


  async sendMessage(message) {
    const tx = this.db.transaction(['messages'], 'readwrite');
    const store = tx.objectStore('messages');
    await store.add({
      ...message,
      timestamp: Date.now(),
      read: false
    });
  }


  startPolling() {
    setInterval(async () => {
      const tx = this.db.transaction(['messages'], 'readonly');
      const store = tx.objectStore('messages');
      const request = store.getAll();


      request.onsuccess = () => {
        const messages = request.result;
        // 处理未读消息
        messages.filter(m => !m.read).forEach(msg => {
          this.handleMessage(msg);
          this.markAsRead(msg.id);
        });
      };
    }, 1000);
  }


  markAsRead(id) {
    const tx = this.db.transaction(['messages'], 'readwrite');
    const store = tx.objectStore('messages');
    store.get(id).onsuccess = (e) => {
      const message = e.target.result;
      if (message) {
        message.read = true;
        store.put(message);
      }
    };
  }
}

WebSocket/SSE#

通过服务器中转实现实时通信。

// WebSocket 实现
class WebSocketMessenger {
  constructor(url) {
    this.ws = new WebSocket(url);
    this.init();
  }


  init() {
    this.ws.onopen = () => {
      console.log('WebSocket connected');
    };


    this.ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      this.handleMessage(data);
    };


    this.ws.onerror = (error) => {
      console.error('WebSocket error:', error);
    };


    this.ws.onclose = () => {
      console.log('WebSocket disconnected');
      // 重连逻辑
      setTimeout(() => this.reconnect(), 5000);
    };
  }


  send(message) {
    if (this.ws.readyState === WebSocket.OPEN) {
      this.ws.send(JSON.stringify(message));
    }
  }


  handleMessage(data) {
    console.log('收到消息:', data);
  }
}


// Server-Sent Events 实现
const sse = new EventSource('/events');
sse.onmessage = (e) => {
  const data = JSON.parse(e.data);
  console.log('SSE消息:', data);
};

URL 参数/Hash#

简单的一次性数据传递。

// 通过 URL 参数传递
const data = { action: 'update', id: 123 };
window.open(`page.html?data=${encodeURIComponent(JSON.stringify(data))}`);


// 接收页面解析
const urlParams = new URLSearchParams(window.location.search);
const data = JSON.parse(decodeURIComponent(urlParams.get('data')));


// 通过 hash 传递
window.location.hash = encodeURIComponent(JSON.stringify({
  action: 'update'
}));


// 监听 hash 变化
window.addEventListener('hashchange', () => {
  if (window.location.hash) {
    const data = JSON.parse(
      decodeURIComponent(window.location.hash.substr(1))
    );
    console.log('Hash data:', data);
  }
});

通用解决方案封装#

创建一个自动选择最佳通信方式的通用解决方案。

class CrossPageMessenger {
  constructor(options = {}) {
    this.options = {
      channel: 'default',
      method: this.detectBestMethod(),
      ...options
    };


    this.id = this.generateId();
    this.messageHandler = null;
    this.init();
  }


  generateId() {
    return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
  }


  detectBestMethod() {
    // 优先级：BroadcastChannel > localStorage > SharedWorker
    if (typeof BroadcastChannel !== 'undefined') {
      return 'broadcast';
    }
    if (typeof Storage !== 'undefined') {
      return 'storage';
    }
    if (typeof SharedWorker !== 'undefined') {
      return 'shared-worker';
    }
    return 'storage'; // 默认降级到 localStorage
  }


  init() {
    switch(this.options.method) {
      case 'broadcast':
        this.initBroadcastChannel();
        break;
      case 'storage':
        this.initStorageChannel();
        break;
      case 'shared-worker':
        this.initSharedWorker();
        break;
      default:
        console.warn(`Unknown method: ${this.options.method}`);
    }
  }


  initBroadcastChannel() {
    this.channel = new BroadcastChannel(this.options.channel);
    this.channel.onmessage = (e) => this.handleMessage(e.data);
  }


  initStorageChannel() {
    window.addEventListener('storage', (e) => {
      if (e.key === this.options.channel && e.newValue) {
        try {
          const data = JSON.parse(e.newValue);
          this.handleMessage(data);
        } catch (error) {
          console.error('Parse error:', error);
        }
      }
    });
  }


  initSharedWorker() {
    this.worker = new SharedWorker('./shared-worker.js');
    this.worker.port.onmessage = (e) => this.handleMessage(e.data);
    this.worker.port.start();
  }


  send(message) {
    const data = {
      ...message,
      timestamp: Date.now(),
      sender: this.id
    };


    switch(this.options.method) {
      case 'broadcast':
        this.channel.postMessage(data);
        break;


      case 'storage':
        localStorage.setItem(
          this.options.channel,
          JSON.stringify(data)
        );
        // 自动清理
        setTimeout(() => {
          localStorage.removeItem(this.options.channel);
        }, 100);
        break;


      case 'shared-worker':
        this.worker.port.postMessage(data);
        break;
    }
  }


  onMessage(callback) {
    this.messageHandler = callback;
  }


  handleMessage(data) {
    // 过滤自己发送的消息
    if (data.sender !== this.id && this.messageHandler) {
      this.messageHandler(data);
    }
  }


  destroy() {
    switch(this.options.method) {
      case 'broadcast':
        this.channel.close();
        break;
      case 'shared-worker':
        this.worker.port.close();
        break;
    }
  }
}


// 使用示例
const messenger = new CrossPageMessenger({
  channel: 'app-events'
});


messenger.onMessage((data) => {
  console.log('收到跨页面消息:', data);
});


messenger.send({
  type: 'user-action',
  payload: 'logged-in'
});

方案选择建议#

方法使用场景优点缺点
localStorage简单的同源通信简单易用、兼容性好有存储限制、同步操作
BroadcastChannel现代浏览器同源通信API 清晰、专为广播设计Safari 支持较晚
SharedWorker需要共享状态真正的共享上下文Safari 不支持、调试困难
Service WorkerPWA 应用功能全面、支持离线实现复杂、HTTPS 要求
postMessage跨域或 iframe 通信支持跨域、标准 API需要窗口引用
WebSocket实时同步实时性好、双向通信需要服务器支持
IndexedDB大量数据共享存储容量大需要轮询、异步 API

选择因素#

在选择跨页面通信方案时，需要考虑以下因素：

  1. 浏览器兼容性：目标用户的浏览器版本
  2. 同源限制：是否需要跨域通信
  3. 实时性要求：消息延迟的容忍度
  4. 数据量大小：传输数据的大小和频率
  5. 连接持久性：是否需要保持长连接
  6. 开发复杂度：实现和维护的成本

最佳实践#

  1. 降级策略：提供多种通信方式的降级方案
  2. 消息格式：统一消息格式，包含类型、时间戳、来源等信息
  3. 错误处理：完善的错误捕获和处理机制
  4. 性能优化：避免频繁通信，合并消息，及时清理
  5. 安全验证：验证消息来源，防止 XSS 攻击
  6. 调试工具：开发调试工具方便问题排查

总结#

跨页面通信是前端开发中的重要技术，不同的方案有各自的优缺点和适用场景。在实际开发中，应该根据具体需求选择合适的方案，并考虑提供降级策略以确保在各种环境下都能正常工作。通过封装通用的通信层，可以降低使用复杂度并提高代码的可维护性。

前端跨页面通信完全指南
https://fuwari.vercel.app/posts/page-communication/
作者
Lorem Ipsum
发布于
2025-11-03
许可协议
CC BY-NC-SA 4.0
window.matchMedia() - 在 JavaScript 中检测和监听 CSS 媒体查询
前端页面水印实现与防篡改方案
© 2025 Lorem Ipsum. All Rights Reserved. / RSS / Sitemap
Powered by Astro & Fuwari