当前位置：首页 > news >正文

前端跨页面通信完全指南

news 来源：原创 2025/5/14 4:28:27

本文将从同源页面、不同源页面、父子框架三个维度，详细讲解前端跨页面通信的各种实现方案，并提供代码示例和对比分析。

一、同源页面通信方案

1. Broadcast Channel API

实现原理：创建命名频道实现多页面订阅发布机制

// 页面A
const bc = new BroadcastChannel('app_channel');
bc.postMessage({ type: 'UPDATE', data: 'new' });

// 页面B
const bc = new BroadcastChannel('app_channel');
bc.onmessage = (e) => {
  console.log('Received:', e.data);
};

优点：API简洁，支持任意数量页面通信
缺点：IE不支持，移动端兼容性需注意

2. LocalStorage 事件

实现原理：利用 storage 事件监听数据变化

// 页面A
localStorage.setItem('shared_data', JSON.stringify(payload));

// 页面B
window.addEventListener('storage', (e) => {
  if (e.key === 'shared_data') {
    const data = JSON.parse(e.newValue);
    // 处理数据
  }
});

优点：兼容性好（IE8+）
缺点：需要同源，无法直接通信，仅能传递字符串

3. SharedWorker

实现原理：使用 Web Worker 实现共享后台线程

// worker.js
const ports = [];
onconnect = (e) => {
  const port = e.ports[0];
  ports.push(port);
  port.onmessage = (e) => {
    ports.forEach(p => p !== port && p.postMessage(e.data));
  };
};

// 页面脚本
const worker = new SharedWorker('worker.js');
worker.port.start();
worker.port.onmessage = (e) => {
  console.log('Received:', e.data);
};

优点：支持复杂场景，可跨浏览器窗口通信
缺点：实现复杂度较高，需要处理连接管理

二、不同源页面通信方案

1. Window.postMessage + Origin 验证

实现原理：通过窗口引用发送消息

// 父页面
childWindow.postMessage('secret', 'https://trusted.com');

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

优点：官方推荐跨域方案
缺点：需要维护窗口引用，存在安全风险需严格验证 origin

2. 服务端中转方案

实现原理：通过服务器进行消息桥接

// 通用模式
页面A -> WebSocket -> Server -> WebSocket -> 页面B

优点：突破所有浏览器限制
缺点：增加服务器开销，需要设计通信协议

三、父子框架通信方案

1. Window.postMessage

<!-- 父页面 -->
<iframe id="child" src="child.html"></iframe>
<script>
  document.getElementById('child')
    .contentWindow.postMessage('ping', '*');
</script>

<!-- 子页面 -->
<script>
  window.addEventListener('message', (e) => {
    e.source.postMessage('pong', e.origin);
  });
</script>

2. Channel Messaging API

// 父页面
const channel = new MessageChannel();
childFrame.postMessage('handshake', '*', [channel.port2]);

channel.port1.onmessage = (e) => {
  console.log('Child says:', e.data);
};

// 子页面
window.addEventListener('message', (e) => {
  const port = e.ports[0];
  port.postMessage('connected');
});

优点：建立专用通信通道
缺点：需要处理端口传递

四、方案对比与选型建议

方案	适用场景	数据量	实时性	兼容性
BroadcastChannel	同源多页	中小型	高	主流浏览器
LocalStorage	简单数据同步	小型	中等	IE8+
SharedWorker	复杂应用状态管理	中大型	高	现代浏览器
Window.postMessage	跨域/框架通信	中小型	高	IE10+
WebSocket	实时跨域通信	大型	极高	IE10+