实现多个标签页之间通信的sharedworker

原创

已于 2022-03-29 09:00:20 修改 · 632 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-03-24 08:51:40 首次发布

这篇博客介绍了如何利用SharedWorker在同源策略下创建一个可被多个浏览上下文（如窗口、iframe）共享的线程。通过示例代码展示了A页面如何向worker发送数据，以及B页面如何接收并显示来自worker的数据，从而实现跨页面通信和数据共享。

SharedWorker

SharedWorker 接口代表一种特定类型的 worker，可以从几个浏览上下文中访问，例如几个窗口、iframe 或其他 worker。它们实现一个不同于普通 worker 的接口，具有不同的全局作用域,

sharedWorker：共享线程，同源策略下，多个运行环境共用同一个线程，包括数据。

首先在服务器上要有一个js，处理需要通信的数据。比如一个worker.js

let data = ''
onconnect = function (e) {
  let port = e.ports[0]
  
  port.onmessage = function (e) {
    
    if (e.data === 'get') {       // 如果是get 则返回数据给客户端
      port.postMessage(data)
    } else {                      // 否则把数据保存
      data = e.data
    }
  }
}

A页面负责传递数据

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<button>点击</