JavaScript使用Broadcast Channel实现前端跨标签页通信
作者：MerkleJqueryRu
在开发Web应用程序时，有时候需要在不同的浏览器标签页之间进行通信。例如，你可能需要在一个标签页中做出的更改在另一个标签页中反映出来，或者需要在用户在一个标签页中执行某些操作时向其他标签页发送消息。为了实现这样的跨标签页通信，我们可以借助HTML5提供的Broadcast Channel API。
实现步骤
首先，我们需要创建两个文件：一个HTML文件和一个JavaScript文件。
HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./crossTabMsg.js"></script>
</head>
<body>
<button id="btn">发送消息</button>
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.onclick = function() {
sendMsg('test', 'hello');
}
listenMsg(function(msg) {
console.log(msg);
})
</script>
</body>
</html>
JavaScript文件（crossTabMsg.js）：
const channel = new BroadcastChannel('cross-tab-msg');
function sendMsg(type, msg) {
channel.postMessage({type, msg});
}
function listenMsg(callback) {
channel.addEventListener('message', e => {
callback && callback(e.data);
});
}
在HTML文件中，我们创建了一个按钮，并为其添加了一个点击事件处理程序。当用户点击按钮时，我们调用sendMsg函数发送一条消息。同时，我们也调用listenMsg函数来监听来自其他标签页的消息，并在控制台中打印出来。
在JavaScript文件中，我们创建了一个名为cross-tab-msg的新的Broadcast Channel，并定义了两个函数：sendMsg用于发送消息，listenMsg用于监听消息。当收到消息时，listenMsg函数会触发回调函数，并将接收到的消息作为参数传递给回调函数。
使用方法
要在不同的标签页之间进行通信，只需在这些标签页中加载相同的HTML和JavaScript文件即可。当你在一个标签页中点击按钮发送消息时，其他标签页中的监听器将会接收到这条消息，并执行相应的操作。
结论
通过使用Broadcast Channel API，我们可以轻松地实现跨标签页通信，使得不同标签页之间可以方便地进行消息传递和数据共享。这为开发复杂的Web应用程序提供了更多的可能性和灵活性。
方法补充
除了上文的方法，小编还为大家整理了其他JavaScript跨标签页通信的方法，希望对大家有所帮助
1.localstorage
<!-- 1.html -->
<script>
if(!localStorage.getItem('a')){
localStorage.setItem('a',1)
}else{
var sum = localStorage.getItem('a')
localStorage.setItem('a', +sum + 1)
}
</script>
<!-- 2.html -->
<script>
window.addEventListener('storage', (e) => console.log(e))
</script>
sessionStorage.setItem('message', '我是sessionStorage的值');
// 触发自定义事件来通知其他标签页
var event = new Event('sessionStorageUpdated');
window.dispatchEvent(event);
window.addEventListener('storage', function(event) {
if (event.key === 'message') {
var message = sessionStorage.getItem('message');
console.log('message:', message);
}
});
// 监听自定义事件来检测 `sessionStorage` 的更新
window.addEventListener('sessionStorageUpdated', function() {
var message = sessionStorage.getItem('message');
console.log('message:', message);
});
2.postMessage
<!-- 1.html -->
<body>
<button class="pop">弹出新窗口</button>
<button class="button">发送数据</button>
<script>
const pop = document.querySelector('.pop');
const button = document.querySelector('.button');
let index = 0;
let opener = null;
pop.addEventListener('click', () => {
opener = window.open(
'2.html',
'123',
'height=600,width=600,top=20,resizeable=yes'
);
});
button.addEventListener('click', () => {
const data = {
value: `moment ${index++}`,
};
opener.postMessage(data, '*');
});
</script>
</body>
<!-- 2.html -->
<body>
<div>postMessage 2.html</div>
<script>
window.addEventListener("message", (e) => {
console.log(e.data);
});
</script>
</body>
3.SharedWorker
<!-- a.html -->
<script>
let index = 0;
const worker = new SharedWorker("worker.js");
setInterval(() => {
worker.port.postMessage(`moment ${index++}`);
}, 1000);
</script>
<!-- b.html -->
<script>
const worker = new SharedWorker("worker.js");
worker.port.start();
setInterval(() => {
worker.port.postMessage("php是世界上最好的语言");
}, 1000);
worker.port.onmessage = function (e) {
if (e.data) {
console.log(e.data);
}
};
</script>
创建一个 worker.js 文件,并编写以下代码：
let data = "";
self.onconnect = (e) => {
const port = e.ports[0];
port.onmessage = function (e) {
if (e.data === "php是世界上最好的语言") {
port.postMessage(data);
data = "";
} else {
data = e.data;
}
};
};
到此这篇关于JavaScript使用Broadcast Channel实现前端跨标签页通信的文章就介绍到这了,更多相关JavaScript Broadcast Channel跨标签页通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！