标签页之间通信：BroadcastChannel实现标签页之间的通信，且满足接收方页面不刷新

Heiwa端

已于 2023-12-28 08:40:17 修改

阅读量412

点赞数 11

文章标签： html5 javascript express

于 2023-12-27 16:02:34 首次发布

本文链接：https://blog.csdn.net/m0_56380626/article/details/135247970

版权

本文介绍了如何使用Express框架搭建服务器，并展示了如何在两个HTML页面之间使用BroadcastChannel进行Websocket通信。发送方捕获用户点击事件并将消息广播，接收方监听并显示接收到的消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

演示

1、express服务器搭建

const express = require('express')
const fileUpload = require("express-fileupload");

const app = express()

const cors = require('cors')
app.use(cors())
app.use(express.urlencoded({ extended: false }))

app.use(fileUpload())

//导入路由模块
const uploadRouter = require('./router/upload')
app.use(uploadRouter)


app.listen(8000, function () { 
  console.log('api serve running at http://127.0.0.1:8000');
})

2、创建两个页面，并注册路由

3、发送方item1.html代码如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标签一</title>
</head>

<body>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</body>
<script>
  const items = document.querySelectorAll('li')
  const channel = new BroadcastChannel('item')
  for (const item of items) {
    item.onclick = function (e) {
      const msg = this.innerHTML
      localStorage.setItem('msg', msg)
      channel.postMessage(msg)
    }
  }
</script>

</html>

4、接收方item2.html代码如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标签二</title>
</head>

<body>
  我是接收
  <div></div>
</body>
<script>
  const channel = new BroadcastChannel('item')
  const div = document.querySelector('div')
  channel.addEventListener('message', (e) => {
    console.log(e.data);
    div.innerHTML = e.data
  })
</script>

</html>