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

barnett_y

已于 2022-03-29 09:00:20 修改

阅读量401

点赞数

分类专栏：【前端收集知识点】文章标签：前端

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

本文链接：https://blog.csdn.net/sinat_17775997/article/details/123701860

版权

【前端收集知识点】专栏收录该内容

75 篇文章 10 订阅

订阅专栏

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>点击</button>

<body>
    <script>        
        if (typeof Worker === "undefined") {
            alert('当前浏览器不支持webworker')
        } else {
            let worker = new SharedWorker('worker.js')
            window.worker = worker
            var i = 0;
            document.querySelector('button').onclick = function() {
                window.worker.port.postMessage('发送信息给worker' + i++)
            }
        }
    </script>
</body>
</html>

B页面就可以获取数据

<!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>获取</button>

<body>
    <script>
        // 这段代码是必须的，打开页面后注册SharedWorker，显示指定worker.port.start()方法建立与worker间的连接
        if (typeof Worker === "undefined") {
            alert('当前浏览器不支持webworker')
        } else {
            let worker = new SharedWorker('worker.js')
            worker.port.addEventListener('message', (e) => {
                console.log('来自worker的数据：', e.data)
            }, false)
            worker.port.start()
            window.worker = worker
        }
        // 获取和发送消息都是调用postMessage方法，我这里约定的是传递'get'表示获取数据。
        document.querySelector('button').onclick = function() {
            window.worker.port.postMessage('get')
        }
    </script>
</body>

</html>

barnett_y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现多个标签页之间通信的sharedworker

SharedWorker SharedWorker接口代表一种特定类型的 worker，可以从几个浏览上下文中访问，例如几个窗口、iframe 或其他 worker。它们实现一个不同于普通worker 的接口，具有不同的全局作用域, 首先在服务器上要有一个js，处理需要通信的数据。比如一个worker.jslet data = ''onconnect = function (e) { let port = e.ports[0] port.onmessage = fu...
复制链接

扫一扫