同源不同页面之间的通信,SharedWorker使用

同源不同页面之间的通信,SharedWorker使用

      • 描述
      • 实现
      • 结果

描述

同源不同页面之间的通信,使用SharedWorker,或者使用全局方法通信,这里使用SharedWorker来实现
mdn地址:https://developer.mozilla.org/zh-CN/docs/Web/API/SharedWorker

实现

/*** @description 所有连接这个worker的集合*/
const portsList = []/*** @description 连接成功回调*/
self.onconnect = (event) => {console.log('self', self)// 当前触发连接的端口const port = event.ports[0]// 添加进去portsList.push(port)// 接收到消息的回调port.onmessage = (event) => {// 获取传递的消息const { message, value } = event.data// 计算let result = 0switch (message) {case 'add':result = value * 2breakcase 'multiply':result = value * valuebreakdefault:result = value}// 给所有连接的目标发送消息portsList.forEach((port) => port.postMessage(`${message}结果是22:${result}`))}
}
console.log('self', self)
const sharedWorker = new SharedWorker(new URL('./worker.js', import.meta.url))
console.log('url', new URL('./worker.js', import.meta.url), import.meta.url)
export default sharedWorker// 为何用这个文件统一new  因为不统一在这里new的话,会因为模块文件不同,导致new的文件不同而不是同一个实例,会不能共享线程
// 用URL来处理文件路径,转换成打包后的正确地址
  1. 为何用这个文件统一new 因为不统一在这里new的话,会因为模块文件不同,导致new的文件不同而不是同一个实例,会不能共享线程
  2. 用URL来处理文件路径,转换成打包后的正确地址
    test1.vue
<template><div><div @click="sendMessage">666</div></div>
</template>
<script>
import hook from './hook.js'
export default {mounted() {hook.port.start()// // 接收SharedWorker返回的结果hook.port.onmessage = (event) => {console.log(event.data, '666')}},methods: {sendMessage() {console.log('hook66', hook)hook.port.postMessage({ message: 'add', value: 1 })},}
}
</script>

text2.vue

<template><div><div @click="sendMessage">777</div></div>
</template>
<script>
import hook from './hook.js'
export default {mounted() {hook.port.start()// // 接收SharedWorker返回的结果hook.port.onmessage = (event) => {console.log(event.data, '777')}},methods: {sendMessage() {console.log('hook77', hook)hook.port.postMessage({ message: 'multiply', value: 3 })},}
}
</script>

ceshi.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>iframe {width: 300px;height: 300px;}</style></head><body><iframe src="http://localhost:8080/#/s1" frameborder="0"></iframe><iframe src="http://localhost:8080/#/s2" frameborder="0"></iframe></body>
</html>

结果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/713908.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Odoo迈入开源第一低代码开发平台的重要里程碑

Odoo17的正式发布已经过去好几个月了&#xff0c;通过一段时间的运用&#xff0c;最大的感触就是&#xff0c;Odoo会成为企业管理软件低代码开发平台的重要一员&#xff0c;而V17则会成为这个过程中具有里程碑意义的版本。 时隔四个月&#xff0c;让我们回头来看看Odoo17带来的…

基YOLOV5实现的AI智能盒子

基于yolov5实现的AI智能盒子框架 开发背景技术实现产品效果源码预览功能介绍 2021-2023是沉淀的几年&#xff0c;经济不景气&#xff0c;各行各业都不太好混&#xff0c;所以这几年也没有太多心思花在csdn上为各大网友写一些技术文章&#xff0c;2024年初&#xff0c;也算是给自…

光栅化算法

多数计算机图形图像&#xff0c;是通过光栅显像显示给用户的&#xff0c;这种系统将图像作为像素阵列进行显示&#xff0c;像素&#xff08;pixel&#xff09;即图像元素&#xff08;picture element&#xff09;的简称。这些像素采用RGB颜色空间。本文讨论光栅显像的基本原理&…

蓝牙耳机哪个好用性价比高?2024热销蓝牙耳机大测评!选购不焦虑

​近年来&#xff0c;蓝牙耳机已经成为了一个非常热门的选择&#xff0c;不仅因为它们小巧便捷&#xff0c;还因为它们的防水性能、音质和佩戴体验已经逐渐超越了有线耳机。随着越来越多的品牌加入蓝牙耳机的市场竞争&#xff0c;各种类型的蓝牙耳机层出不穷。特别是对于运动爱…

2024年全国乙卷高考理科数学备考:十年选择题真题和解析

今天距离2024年高考还有三个多月的时间&#xff0c;今天我们来看一下2014~2023年全国乙卷高考理科数学的选择题&#xff0c;从过去十年的真题中随机抽取5道题&#xff0c;并且提供解析。后附六分成长独家制作的在线练习集&#xff0c;科学、高效地反复刷这些真题&#xff0c;吃…

GEE数据集——GLC_FCS30D - 全球 30 米土地覆被变化数据集(1985-2022 年)

GLC_FCS30D - 全球 30 米土地覆被变化数据集&#xff08;1985-2022 年&#xff09; 注 本数据集是正在提交的论文的一部分&#xff0c;因此没有引用和 DOI 信息。请在使用本数据集时注意这一点。 GLC_FCS30D 数据集是全球土地覆被监测领域的一项开创性进展&#xff0c;它以 30…

SpringBoot 整合WebService

文章目录 WebService1.简单介绍WebService1.1. 类型1.2. 架构1.3. 主要特点1.4. 使用场景1.5. Web服务标准和技术 2.案例-WebServiceDemo2.1.引入配置文件2.2.创建接口2.3.创建接口实现类2.4.创建WebService配置类2.5.测试 WebService Web服务&#xff08;Web Services&#xf…

2024年腾讯云优惠券/代金券领取三个方法整理(收藏级)

腾讯云代金券领取渠道有哪些&#xff1f;腾讯云官网可以领取、官方媒体账号可以领取代金券、完成任务可以领取代金券&#xff0c;大家也可以在腾讯云百科蹲守代金券&#xff0c;因为腾讯云代金券领取渠道比较分散&#xff0c;腾讯云百科txybk.com专注汇总优惠代金券领取页面&am…

CentOS系统上安装幻兽帕鲁/Palworld服务端的详细步骤是什么?

CentOS系统上安装幻兽帕鲁/Palworld服务端的详细步骤是什么&#xff1f; 首先&#xff0c;需要确认Docker是否已经安装。如果未安装&#xff0c;则需要进行安装。接下来&#xff0c;运行Docker容器。这一步是为了创建一个可以运行幻兽帕鲁服务端的环境。然后&#xff0c;在容器…

民爆5G智能制造工厂数字孪生可视化平台,推进民爆工业数字化转型

民爆5G工厂智能制造数字孪生可视化平台&#xff0c;推进行业数字化转型。民爆行业作为国家经济发展的重要支柱产业&#xff0c;其数字化转型对于提高生产效率、降低成本、保障安全等方面具有重要意义。而民爆5G工厂智能制造数字孪生可视化平台正是推进行业数字化转型的关键技术…

Flutter中Future和Stream关系

Future和Stream类是Dart异步编程的核心。 Future 表示一个不会立即完成的计算过程。与普通函数直接返回结果不同的是异步函数返回一个将会包含结果的 Future。该 Future 会在结果准备好时通知调用者。 Stream 是一系列异步事件的序列。其类似于一个异步的 Iterable&#xff0c;…

AutoEncoder和 Denoising AutoEncoder学习笔记

参考&#xff1a; 【1】 https://lilianweng.github.io/posts/2018-08-12-vae/ 写在前面&#xff1a; 只是直觉上的认识&#xff0c;并没有数学推导。后面会写一篇&#xff08;抄&#xff09;大一统文章&#xff08;概率角度理解为什么AE要选择MSE Loss&#xff09; TOC 1 Au…

1907_Arm Cortex-M3的基本了解

1907_Arm Cortex-M3的基本了解 全部学习汇总&#xff1a; g_arm_cores: ARM内核的学习笔记 (gitee.com) 我发现Arm Coretex-M3有一个专门的DataSheet&#xff0c;看起来这个的确是被当做了一个设计的产品来对待的。正好&#xff0c;基于这个文件来看看M3具备哪些基本的特性&…

vue 使用vue-scroller 列表滑动到底部加载更多数据

安装插件 npm install vue-scroller -dmain.js import VueScroller from vue-scroller Vue.use(VueScroller)<template><div class"wrap"><div class"footer"><div class"btn" click"open true">新增</d…

多层控制上身姿态的方法

1选择要施加的clip并调出层控制窗口 2点选motion层控制 3选择并复制pose&#xff08;注意在哪个层中选中的情况下复制的是那个层中的pose&#xff09; 4在新建层中分别选择头帧粘贴pose和尾帧粘贴pose因是上半身&#xff0c;因此mask中把下半身去掉即变灰

提升工作能力的方法

1.接受工作&#xff0c;只问标准 2.请示工作&#xff0c;必带方案&#xff1b; 3.汇报工作&#xff0c;突出成果&#xff1b; 4.分享工作&#xff0c;细说流程&#xff1b; 5.复盘工作&#xff0c;总结SOP 如果能这么做&#xff0c;那将是一个非常通透的高手&#xff0c;所以高…

2024年春招小红书前端实习面试题分享

文章目录 导文面试重点一、方便介绍一下&#xff0c;你之前实习都做了什么嘛&#xff1f;二、 可以讲一下封装组件相关逻辑嘛&#xff1f;1. 为什么要封装组件&#xff1f;2. 封装组件的步骤3. 封装组件的原则4. 组件的复用和扩展5. 组件的维护和文档 三、项目的性能优化你有什…

selenium测试工具用来模拟用户浏览器的操作

执行JS的类库&#xff1a;execjs&#xff0c;PyV8&#xff0c;selenium&#xff0c;node pip list pip install selenium pip install xlrd pip install xlwt pip install PyExecJS pip install xlutils selenium测试工具可以用来模拟用户浏览器的操作&#xff0c;其支持的浏览…

能当老板的AI大模型多智体框架MetaGPT自动完成项目

能当老板的AI大模型多智体框架MetaGPT自动完成项目。 MetaGPT是一个创新的多智能体框架&#xff0c;它结合了大语言模型&#xff08;LLM&#xff09;和多智能体协作系统&#xff0c;旨在通过模拟人类工作流程来解决复杂问题。这个框架的核心在于将标准化操作程序&#xff08;SO…

Python实现MACD工具判断信号:股票技术分析的工具系列(1)

Python实现MACD工具判断信号&#xff1a;股票技术分析的工具系列&#xff08;1&#xff09; 介绍代码rolling函数介绍核心代码计算指数移动平均值计算MACD指标 完整代码 介绍 先看看官方介绍&#xff1a; MACD (平滑异同平均线&#xff09; 指标说明 DIF线&#xff1a;收盘价短…