sharedWorker共享工作线程，两个不同页面或不同窗口之间传递信息

cdcdhj

于 2024-11-08 20:08:36 发布

阅读量544

点赞数 3

分类专栏： javascript学习日记文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/cdcdhj/article/details/143633955

版权

javascript学习日记专栏收录该内容

151 篇文章

订阅专栏

当然可以。下面是一个简单的示例，展示了如何在主线程和 SharedWorker 之间相互传递信息，以及如何在两个不同的主线程（比如两个不同的网页或者同一个网页的两个不同窗口）之间通过 SharedWorker 传递信息
注意：由于 SharedWorker 的作用域中没有 window 对象，因此 console、alert 等方法都是无法直接使用的。不过，你可以通过以下步骤在浏览器的控制台中查看 SharedWorker 的输出：
在 Chrome 浏览器地址栏输入 chrome://inspect，进入 Chrome 的开发者工具界面。
在左侧菜单中找到 “Shared workers” 部分。
点击你想要检查的 SharedWorker 实例旁边的 “inspect” 链接，这将打开一个新的开发者工具窗口，其中包含了 SharedWorker 的控制台输出

//js文件sharedWorker2.js

self.onconnect=function(e){
	//页面之间的通信是利用worker实例posts数组:worker.ports.onmessage或worker.ports.start
	//获取端口
    let port=e.ports[0];
    //获取主线程传递过来的信息
    port.onmessage=(e)=>{
        console.log('监听主线程的消息',e.data);
        //给主程线返回信息
        port.postMessage('接收到主线信息，已经确认')
    };
    //关闭主线程
    port.onclose=()=>{
        console.log('与主线程已经断开');
    }
};

//获取信息的页面1
//index1.html

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
        <title>共享线程之间互传信息页面1</title>
        <script type="text/javascript">
            var sharedWorker;//创建共享线程变量
            if(window.SharedWorker)//浏览器是否支持共享线程
            {
            	//创建共享线程
                sharedWorker=new SharedWorker('sharedWorker2.js');
                //接收子线程返回的数据
                sharedWorker.port.onmessage=(e)=>{
                    console.log('监听共享线程发过来的信息',e.data);
                }
                //接收子线程返回的错误信息
                sharedWorker.port.onerror=(e)=>{
                    console.error("Error:",e);
                };
                //给子线程发送一条信息
                sharedWorker.port.postMessage('向sharedWorker发送一条信息1111');
            }else
            {
                console.log('你的浏览器不支持共享线程');
            }
        </script>
    </head>
    <body>
        
    </body>
</html>

//第2 个子页面

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
        <title>共享线程之间互传信息页面2</title>
        <script type="text/javascript">
            var sharedWorker;
            if(window.SharedWorker)
            {
                sharedWorker=new SharedWorker('sharedWorker2.js');
                //这里重新连接信息端口
                sharedWorker.port.start();
                sharedWorker.port.onmessage=(e)=>{
                    console.log('监听共享线程发过来的信息',e.data);
                }
                sharedWorker.port.onerror=(e)=>{
                    console.error("Error:",e);
                };
                sharedWorker.port.postMessage('向sharedWorker发送一条信息2222');
            }else
            {
                console.log('你的浏览器不支持共享线程');
            }
        </script>
    </head>
    <body>
        
    </body>
</html>