脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 前端跨标签页通信

前端实现跨标签页通信的方案总结

 更新时间：2025年11月20日 09:00:44   作者：！win ！  
这篇文章主要为大家详细介绍了前端实现跨标签页通信的相关方案,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下

前情

平时开发很少有接触到有什么需求需要实现跨标签页通信，但最近因为一些变故，不得不重新开始找工作了，其中就有面试官问到一道题，跨标签页怎么实现数据通信，我当时只答出二种，面试完后特意重新查资料，因此有些文章

localStorage / sessionStorage

利用localStorage的存储事件实现通信，当一个标签页修改localStorage时，其他同源标签页会触发storage事件

关键代码如下：

标签页1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>page0-localStorage</title>
</head>
<body>
  <button id="setCacheBtn">设置本地缓存</button>
  <script>
    document.getElementById('setCacheBtn').addEventListener('click', () => {
      localStorage.setItem('message', JSON.stringify({
        type: 'greeting',
        // 这里为了保证通信每次生效，每次都设置不同的值
        content: 'Hello from page0.html' + Date.now()
      }));
    });
  </script>
</body>
</html>

标签页2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>page1-localStorage</title>
</head>
<body>
  <script>
    window.addEventListener('storage', (e) => {
      if (e.key === 'message') {
        const data = JSON.parse(e.newValue);
        console.log('Received:page1.html', data);
      }
    });
  </script>
</body>
</html>

动图演示：

提醒：

  • 同源标签才有效
  • 设置不同的本地存储值才有效，如果设置的是同一个缓存值是不会生效的
  • 兼容性非常nice，可以大胆使用了，国内一些浏览器从can i use查不到，但兼容性是没啥问题的
  • sessionStorage仅在同一标签页的不同 iframe 间有效，不适用于不同标签页

BroadcastChannel

专门用于同源标签页通信的 API，创建一个频道后，所有加入该频道的页面都能收到消息

关键代码如下:

标签页1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BroadcastChannel0</title>
</head>
<body>
  <h1>BroadcastChannel0</h1>
  <button id="communication">BroadcastChannel0.html 发送消息</button>
  <script>
    // 所有页面都创建相同名称的频道
    const channel = new BroadcastChannel('my_channel');

    // 发送消息
    document.getElementById('communication').addEventListener('click', () => {
      channel.postMessage({ type: 'update', data: 'new content from BroadcastChannel0.html' });
    });
  </script>
</body>
</html>

标签页2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BroadcastChannel1</title>
</head>
<body>
  <h1>BroadcastChannel1</h1>
  <script>
    // 所有页面都创建相同名称的频道
    const channel = new BroadcastChannel('my_channel');

    // 接收消息
    channel.onmessage = (e) => {
      console.log('Received:BroadcastChannel1.html', e.data);
    };
  </script>
</body>
</html>

演示动图如下：

提醒：

  • 要通信的标签记得都初始化BroadcastChannel，一定记得使用相同的名称
  • 查询来看除IE外可以大但使用了

SharedWorker

共享工作线程可以在多个标签页之间共享数据和逻辑，通过postMessage通信

关键代码如下：

标签页1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SharedWorker0</title>
</head>
<body>
  <h1>SharedWorker0</h1>
  <button id="communication">SharedWorker0.html 发送消息</button>
  <script>
    // 主线程
    const worker = new SharedWorker('sw.js');

    // 发送消息
    document.getElementById('communication').addEventListener('click', () => {
      worker.port.postMessage('Hello from Tab:SharedWorker0.html');
    });
  </script>
</body>
</html>

标签页2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SharedWorker1</title>
</head>
<body>
  <h1>SharedWorker1</h1>
  <script>
    // 主线程
    const worker = new SharedWorker('sw.js');

    // 接收消息
    worker.port.onmessage = (e) => {
      console.log('Received:SharedWorker1.html', e.data);
    };
  </script>
</body>
</html>

sw.js关键代码：

const connections = [];

self.onconnect = (e) => {
  const port = e.ports[0];
  connections.push(port);
  
  port.onmessage = (e) => {
    // 广播给所有连接的页面
    connections.forEach(p => p.postMessage(e.data));
  };
};

动图演示：

提醒：

  • 同源标签才有效
  • 不同页面创建 SharedWorker 时，若指定的脚本路径不同（即使内容相同），会创建不同的 worker 实例
  • 页面与 SharedWorker 之间通过 MessagePort 通信，需通过 port.postMessage() 发送消息，通过 port.onmessage 接收消息
  • SharedWorker 无法访问 DOM、window 对象或页面的全局变量，仅能使用 JavaScript 核心 API 和部分 Web API（如 fetch、WebSocket）
  • 兼容性一般，安卓webview全系不兼容

Service Worker

专门用于同源标签页通信的 API，创建一个频道后，所有加入该频道的页面都能收到消息

关键代码如下:

标签页1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ServiceWorker0</title>
</head>
<body>
  <h1>ServiceWorker0</h1>
  <button id="sendBtn">发送消息</button>
  <script>
    // 注册ServiceWorker
    let swReg;
    navigator.serviceWorker.register('ServiceWorker.js')
      .then(reg => {
        swReg = reg;
        console.log('SW注册成功');
      });
    
    // 发送消息
    document.getElementById('sendBtn').addEventListener('click', () => {
      if (swReg && swReg.active) {
        swReg.active.postMessage('来自页面0的消息');
      }
    });
  </script>
</body>
</html>

标签页2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ServiceWorker1</title>
</head>
<body>
  <h1>ServiceWorker1</h1>
  <script>
    // 注册ServiceWorker
    navigator.serviceWorker.register('ServiceWorker.js')
      .then(() => console.log('SW注册成功'));
    
    // 接收消息
    navigator.serviceWorker.addEventListener('message', (e) => {
      console.log('---- Received:ServiceWorker1.html ----:',  e.data);
    });
  </script>
</body>
</html>

ServiceWorker.js关键代码

// 快速激活
self.addEventListener('install', e => e.waitUntil(self.skipWaiting()));
self.addEventListener('activate', e => e.waitUntil(self.clients.claim()));

// 消息转发
self.addEventListener('message', e => {
  self.clients.matchAll().then(clients => {
    clients.forEach(client => {
      if (client.id !== e.source.id) {
        client.postMessage(e.data);
      }
    });
  });
});

演示动图如下：

提醒：

Service Worker 要求页面必须在 HTTPS 环境 下运行（localhost 除外，方便本地开发），这是出于安全考虑，防止中间人攻击篡改 Service Worker 脚本

Service Worker 有严格的生命周期（安装、激活、空闲、销毁），一旦注册成功会长期运行在后台，更新 Service Worker 需满足两个条件：

脚本 URL 不变但内容有差异

需在 install 事件中调用 self.skipWaiting()，并在 activate 事件中调用 self.clients.claim() 让新 Worker 立即生效

Service Worker 的作用域由注册路径决定，默认只能控制其所在路径及子路径下的页面，例如：/sw.js 可控制全站，/js/sw.js 默认只能控制 /js/ 路径下的页面，可通过 scope 参数指定作用域，但不能超出注册文件所在路径的范围

可在浏览器开发者工具的 Application > Service Workers 面板进行调试，

  • 查看当前运行的 Service Worker 状态
  • 强制更新、停止或注销 Worker
  • 模拟离线环境

主流浏览器都支持，使用的时候可以通过Is service worker ready?，测试兼容性

window.open + window.opener

如果标签页是通过window.open打开的，可以直接通过opener属性通信

父窗口，打开子窗口的页面关键代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>parent</title>
</head>
<body>
  <h1>window.open parent</h1>
  <button id="openBtn">打开子窗口</button>
  <button id="sendBtn">发送消息</button>
  <div id="messageDisplay"></div>
  <script>
    let childWindow = null;
    let messageHandler = null;
    
    // 打开子窗口
    document.getElementById('openBtn').addEventListener('click', () => {
      // 如果已有窗口，先关闭
      if (childWindow && !childWindow.closed) {
        childWindow.close();
      }
      childWindow = window.open('./children.html', 'childWindow');
    });

    // 发送消息
    document.getElementById('sendBtn').addEventListener('click', () => {
      if (childWindow && !childWindow.closed) {
	      // window.location.origin限制接收域名
        childWindow.postMessage('Hello child', window.location.origin);
      } else {
        alert('请先打开子窗口');
      }
    });
    
    // 接收子窗口的消息
    messageHandler = (e) => {
      if (e.origin === window.location.origin && e.source !== window) {
        document.getElementById('messageDisplay').textContent = '收到消息: ' + e.data;
        console.log('父页面收到消息:', e.data);
      }
    };
    
    window.addEventListener('message', messageHandler);
  </script>
</body>
</html>

通过window.open打开的子页面关键代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>children</title>
</head>
<body>
  <h1>子窗口</h1>
  <button id="replyBtn">回复父窗口</button>
  <div id="messageDisplay"></div>
  
  <script>
    let messageHandler = null;
    
    // 只在页面加载完成后设置消息监听
    window.onload = function() {
      // 接收父页面消息
      messageHandler = (e) => {
        if (e.origin === window.location.origin && e.source !== window) {
          console.log('子页面收到消息:', e.data);
          
          // 显示收到的消息
          document.getElementById('messageDisplay').textContent = '收到消息: ' + e.data;
          
          window.opener.postMessage('子窗口已收到消息', e.origin);
        }
      };
      
      window.addEventListener('message', messageHandler);
    };
    
    // 手动回复按钮
    document.getElementById('replyBtn').addEventListener('click', () => {
      if (window.opener) {
        window.opener.postMessage('来自子窗口的回复', window.location.origin);
      }
    });
  </script>
</body>
</html>

提醒：

  • 允许跨域通信，但必须由开发者显式指定信任的源，避免恶意网站滥用
  • 在事件监听的时候记得判断e.source，避免自己发送的事件自己接收了
  • 若子窗口被关闭，父窗口中对它的引用（如 childWindow）会变成无效对象，调用其方法会报错
  • window.open使用会有一些限制，最好是在事件中使用，有的浏览器还会有权限提示，需要用户同意才行，若 window.open 被浏览器拦截（非用户主动触发），会返回 null，导致后续通信失败

总结

面试官有提到Service Worker也可以，我面试完后的查询资料尝试了这些方法，都挺顺利的，就是Service Worker折腾了一会才跑通，使用起来相比前面的一些方式，它稍微复杂一些，我觉得用于消息通信只是它的冰山一角，它有一个主要功能就是用来解决一些耗性能的计算密集任务

个人技术有限，如果你有更好的跨标签页通信方式，期待你的分享，你工作中有遇到这种跨标签页通信的需求么，如果有你用的是哪一种了，期待你的留言

以上就是前端实现跨标签页通信的方案总结的详细内容，更多关于前端跨标签页通信的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • JS中artdialog弹出框控件之提交表单思路详解

    JS中artdialog弹出框控件之提交表单思路详解

    artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口。本文给大家介绍JS中artdialog弹出框控件之提交表单思路详解，对本文感兴趣的朋友一起学习吧
    2016-04-04
  • JavaScript实现网页电子时钟

    JavaScript实现网页电子时钟

    这篇文章主要为大家详细介绍了JavaScript实现网页电子时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 前端页面文件拖拽上传模块js代码示例

    前端页面文件拖拽上传模块js代码示例

    这篇文章主要为大家详细介绍了前端页面文件拖拽上传模块js代码示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 微信小程序实现禁止分享代码实例

    微信小程序实现禁止分享代码实例

    这篇文章主要介绍了微信小程序实现禁止分享代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • 小程序开发指南之全局配置

    小程序开发指南之全局配置

    这篇文章主要给大家介绍了关于小程序开发指南之全局配置的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-01-01
  • JavaScript实现审核流程状态的动态显示进度条

    JavaScript实现审核流程状态的动态显示进度条

    对于有很多流程的东西，我们希望能够根据不同的阶段，用流程条对应地进行显示，非常直观，给用户带来极好的用户体验，下面小编给大家分享JavaScript实现审核流程状态的动态显示进度条功能，需要的的朋友参考下
    2017-03-03
  • javascript对象的相关操作小结

    javascript对象的相关操作小结

    下面小编就为大家带来一篇javascript对象的相关操作小结。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JS中with的替代方法与String中的正则方法详解

    JS中with的替代方法与String中的正则方法详解

    最近这几天在升级自己的MVVM 框架,遇到很多小问题,所以想着就在这里统一解决了。文中主要介绍了关于Javascript中with的替代方法与String中的正则方法，有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-12-12
  • 小程序上传文件至云存储的实现

    小程序上传文件至云存储的实现

    在小程序云开发中，要实现上传文件至云存储，有两种方案：云函数和HTTP API，本文主要讲讲如何使用HTTP API实现小程序外上传文件至云存储，感兴趣的可以了解一下
    2022-01-01
  • js实现可控制左右方向的无缝滚动效果

    js实现可控制左右方向的无缝滚动效果

    这篇文章主要介绍了js实现可控制左右方向的无缝滚动效果,页面中添加了两个按钮，控制图片滚动的方向，感兴趣的小伙伴们可以参考一下
    2016-05-05

最新评论