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

厦门网站设计公司网站建设包含

news 2025/9/17 17:37:13

厦门网站设计公司,网站建设包含,网页设计免费教程,焦溪翠冠梨做的网站前提须知使用 BroadcastChannel 来实现浏览器tab通讯必须是同源的BroadcastChannel 支持多tab间通讯mdn 链接具体使用发送方使用 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewpor…

前提须知

使用 BroadcastChannel 来实现浏览器tab通讯必须是同源的
BroadcastChannel 支持多tab间通讯
mdn 链接

具体使用

发送方使用

<!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><div><button style="all: unset" onclick="onSend()">发送</button></div><script>/*** BroadcastChannel * 接收方和发送发必须是同源的才行进行浏览器tab的通讯* */const broadcast = new BroadcastChannel('music')broadcast.onmessage = (e) => {console.log(e)}function onSend() {console.log('点击了');broadcast.postMessage({name: 'music',data: '发送的数据'})}</script>
</body>
</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>
</head>
<body><script>const broadcast = new BroadcastChannel('music')broadcast.onmessage = ({data}) => {console.log('music接受数据了', data)}</script>
</body>
</html>