目前浏览器跨标签页通信的方式有很多，比如：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.jsconst 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.jslisten((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 });
}
