BroadcastChannel：跨标签页通信

前端Jason

已于 2024-05-10 23:57:18 修改

阅读量266

点赞数 2

文章标签：前端标签页通信 broadcast

于 2024-05-10 23:55:02 首次发布

本文链接：https://blog.csdn.net/qq_44704740/article/details/138685394

版权

目前浏览器跨标签页通信的方式有很多，比如：websocket、针对LocalStorage使用window.onstorage、window.postmessage。
本文将用BroadcastChannel实现同一域名下两个标签页间消息的收和发

一、全局创建通信通道

const channel = new BroadcastChannel('channel1');

二、发送消息与监听消息

const sendMsg = (type, msg) => {
  channel.postMessage({
    type,
    msg,
  });
};

const listen = (callback) => {
  channel.addEventListener('message', (e) => {
    console.log('eee', e);
    callback(e.data);
  });
}

三、应用

触发事件

const handleClick = () => {
  sendMsg('add', { name: '张三', age: 22 });
}

接受消息处理业务逻辑

listen((data) => {
  console.log('data', data);
  const { type, msg } = data;
  if (type === 'add') {
    const h1 = document.querySelector('h1');
    h1.append(`姓名：${msg.name}-年龄：${msg.age}`);
  }
});

演示

使用Live Server启动本地演示项目，两个标签页打开同一个页面，一个发一个收

channel

源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./channel.js"></script>
  <script src="./index.js"></script>
  <button onclick="handleClick(event)">发送</button>
  <h1></h1>
</body>
</html>

// channel.js

const channel = new BroadcastChannel('channel1');

const sendMsg = (type, msg) => {
  channel.postMessage({
    type,
    msg,
  });
};

const listen = (callback) => {
  channel.addEventListener('message', (e) => {
    console.log('eee', e);
    callback(e.data);
  });
}

// index.js

listen((data) => {
  console.log('data', data);
  const { type, msg } = data;
  if (type === 'add') {
    const h1 = document.querySelector('h1');
    h1.append(`姓名：${msg.name}----年龄：${msg.age}`);
  }
});

const handleClick = () => {
  sendMsg('add', { name: '张三', age: 22 });
}

前端Jason

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
BroadcastChannel：跨标签页通信

目前浏览器跨标签页通信的方式有很多，比如：websocket、针对LocalStorage使用window.onstorage、window.postmessage。本文将用BroadcastChannel实现同一域名下两个标签页间消息的收和发。
复制链接

扫一扫