如何实现酷狗音乐pc页面点击播放时,打开多个歌曲播放时,始终在一个播放页面,(标签页的通讯)

news2025/1/19 23:15:35

大致有两种思路,

一种是通过wind.open()方法传第二个参数,

A页面:

//点击跳转播放页函数

function toPlayPage(){

window.open('path/xxxx/xxxx?name=音乐名','music')//第二个参数写一个定值,代表跳转页面都为music标签页,就可以实现点击多次播放页只在一个播放页里面播放
}

B页面:

mountend:{
const params = new URLSearchParams(location.search)
let querry= params.get('name')//拿到a页面跳转过来传递的参数
}

function play(){

}

这种方式有个弊端,就是每次点击播放页,总是会刷新播放页,并不是很好,而酷狗播放页并不是刷新而是跳转过来直接就是播放。

第二种就是创建一个通信频道broadcastChannel

这种方式有两个前提条件,一个是必须同源,一个是必须通道名相同

A页面:

const channel= new BroadcastChannel ('music')

if(有标签页的时候再去发送消息){
channel.postMessage('音乐名') //向b页面发送信息
}

这里需要有个细节需要当有标签页时候再去发送消息,因为一开始肯定是没有播放的标签页的,所以有两个思路去:

第一种是利用同源所以localStorage是共享的这个原理去做,第一打开播放页时候就本地存个值(比如设置已打开标签页的数量),播放页关闭的时候去掉这个值。 发送消息时候去判断是否有标签页,但是这种方法有个弊端就是localStorage是很容易被篡改的,不太好

第二种是 b页面也是可以给a页面发送消息,当b页面被打开时候,往a页面去发送消息,表示标签页被打开,然后a页面去管理这个状态,从而识别标签页是否被打开。

B页面:

const channel= new BroadcastChannel ('music')

channel.addEventListener('message',(e)=>{
    console.log(e.data) // 获取到其他同源标签页同名频道发来的消息
})

关闭监听的方法:

  • 一种方式是取消或者修改相应的'message'事件监听
  • 另一种简单的方式就是使用 Broadcast Channel 实例为我们提供的close方法。
channel.close();

两者是有区别的:

取消'message'监听只是让页面不对广播消息进行响应,Broadcast Channel 仍然存在;而调用close方法这会切断与 Broadcast Channel 的连接,浏览器才能够尝试回收该对象,因为此时浏览器才会知道用户已经不需要使用广播频道了。

在关闭后调用postMessage会出现如下报错

 如果之后又再需要广播,则可以重新创建一个相同 name 的 Broadcast Channel。

标签页之间的信息通讯有很多种场景和方式,可以看我这篇文章前端跨页面交互信息或传递信息都有这么几种方式,总有一个满足你的使用场景

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

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

相关文章

小程序本地文件读、写、追加数据操作,以及修改文件内容

小程序系统文件管理器 FileSystemManager 要操作/读取本地文件,首先需要创建文件或文件夹,然后再对文件进行读写操作; 首先创建文件 FileSystemManager.writeFile 可直接创建文件并写入内容 定义文件路径,此路径在读写操作时保持一致 const path = `${wx.env.USER_DATA…

基于电商场景的高并发RocketMQ实战-NameServer内核原理剖析、Broker 主从架构与集群模式原理分析

🌈🌈🌈🌈🌈🌈🌈🌈 【11来了】文章导读地址:点击查看文章导读! 🍁🍁🍁🍁🍁🍁&#x1f3…

分而治之:Fork/Join框架(构造一个1到200 000求和的任务)

Fork一词的原始含义是吃饭用的叉子,也有分叉的意思。在linux平台中, 方法fork用来创建子进程。使得系统进程可以多一个执行分组。 而join方法这里表示等待,也就是使用fork方法后系统多了一个执行分支(线程) 所以需要等待这个执行分支执行完毕…

【NI-RIO入门】使用其他文本语言开发CompactRIO

1.FPGA 接口Python API Getting Started — FPGA Interface Python API 19.0.0 documentation 2.FPGA接口C API FPGA 接口 C API 是用于 NI 可重配置 I/O (RIO) 硬件(例如 NI CompactRIO、NI Single-Board RIO、NI 以太网 RIO、NI FlexRIO、NI R 系列多功能 RIO 和…

技术分享 | 接口测试请求超时怎么办?

​ 📢专注于分享软件测试干货内容,欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!📢交流讨论:欢迎加入我们一起学习!📢资源分享:耗时200小时精选的「软件测试…

机场数据治理系列介绍(2):六图法开展数据治理的步骤与要点

目录 一、机场数据治理的六图法 1、何为六图法 二、应用数据治理六图法的相关工作步骤 1、制定战略目标 2、梳理业务情况 3、收集需求 4、构建数智应用地图 5、选择合适的算法 6、建立数据地图 7、持续改进和优化 三、相关要点 1、明确数据治理三张清单 2、持续构…

JWT是什么?它有什么用?

1. 什么是 JWT? JWT是 JSON Web Token 的缩写,通过数字签名的方式,以 JSON 对象为载体,在不同的服务器终端之间安全传输的信息。 2. JWT 有什么用? JWT 最常见的场景就是授权认证,一旦用户登录&#xff…

异方差 的 BP检验 方法及原理详解

异方差 的 BP检验详解            文章目录 1. `BP`检验的步骤2. 场景示例步骤 ①步骤 ②BP检验,也称为Breusch-Pagan检验,是一种用于检验线性回归模型中异方差性(即误差项方差不恒定)的统计方法。该方法由Trevor S. Breusch和Adrian R. Pagan在1980年提出。 1.…

亚马逊圣诞关键词怎么选?亚马逊圣诞节促销活动有哪些?——站斧浏览器

亚马逊圣诞关键词怎么选? 以下是在亚马逊圣诞期间利用长尾关键词的一些建议: 圣诞主题关键词:随着节日的临近,与圣诞相关的关键词搜索热度将急剧上升。在产品标题、描述、关键词等位置使用与圣诞节相关的关键词,比如…

ArcTS循环ForEach

//定义类 class Item{image:ResourceStrconstructor(image:ResourceStr){this.imageimage} } Entry Component struct Index {//声明变量private items:Array<Item>[new Item($r(app.media.my_icon)),new Item($r(app.media.my_icon)),new Item($r(app.media.my_icon)),n…

人大金仓Kingbase数据库备份和还原

前言 最近在项目开发过程中&#xff0c;使用了国产数据库人大金仓&#xff08;即Kingbase数据库&#xff09;&#xff0c;在使用过过程中需要对数据库进行备份与还原&#xff0c;在此对相关的命令进行简单介绍&#xff0c;以备不时之需。 Linux环境下安装人大金仓可参考此篇文…

k8s部署elastic+kibana

1.软件版本说明 1.1软件版本说明 软件版本kubernetes1.23.17elasticsearch7.17.3kibana7.17.3 1.2硬件环境说明 宿主机使用windows10安装vmware17.5.0&#xff0c;虚拟机安装linux系统&#xff08;centos7.9&#xff09; 说明&#xff1a; elasticserch和kibana的版本尽量…

邦火策划的餐饮品牌策划,到底是不是打破常规的创新之选?

在餐饮业的浩瀚市场中&#xff0c;邦火策划以其独特的餐饮品牌策划服务&#xff0c;引起了业界的关注。邦火策划是否真的是打破常规的创新之选&#xff1f;让我们深入了解&#xff0c;探寻其中的奥秘。 首先&#xff0c;邦火策划在餐饮品牌策划中的创新之处在于对市场的深度洞…

【IDEA】try-catch自动生成中修改catch的内容

编辑器 --> 文件和代码模板 --> 代码 --> Catch Statement Body

又老性能又差,为什么好多公司依然选择 RabbitMQ?

大家好&#xff0c;我是君哥。 RabbitMQ 这个消息队列相信很多程序员都用过&#xff0c;我第一次使用是在 2016 年&#xff0c;确实是一个老牌的消息队列了&#xff0c;但是为什么一直没有被淘汰呢&#xff1f;今天来聊一聊这个话题。 老旧差 发布历史 为什么说 RabbitMQ 老…

drools入门案例

1 业务场景说明 业务场景&#xff1a;消费者在图书商城购买图书&#xff0c;下单后需要在支付页面显示订单优惠后的价格。具体优惠规则如下&#xff1a; 规则编号 规则名称 描述 1 规则一 所购图书总价在100元以下的没有优惠 2 规则二 所购图书总价在100到200元的优惠2…

AtomHub 开源容器镜像中心开放公测,国内服务稳定下载

由开放原子开源基金会主导&#xff0c;华为、浪潮、DaoCloud、谐云、青云、飓风引擎以及 OpenSDV 开源联盟、openEuler 社区、OpenCloudOS 社区等成员单位共同发起建设的 AtomHub 可信镜像中心正式开放公测。AtomHub 秉承共建、共治、共享的理念&#xff0c;旨在为开源组织和开…

Linux常用基本命令(三)

一、显示命令 1. cat 通式&#xff1a;cat 选项 文件名 只能看普通的文本文件 缺点&#xff1a;如果内容过多会显示不全 选项效果-n显示行号包括空行-b跳过空白行编号-s讲所有的连续的多个空行替换为一个空行&#xff08;压缩成一个空行&#xff09;-A显示隐藏字符 三个标准文件…

SpringBoot的配置高级

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…

前端基础location的使用

概念 获取当前页面的地址信息&#xff0c;还可以修改某些属性&#xff0c;实现页面跳转和刷新等。 样例展示 window.location 含义.originURL 基础地址&#xff0c;包括协议名、域名和端口号.protocol协议 (http: 或 https:).host域名端口号.hostname域名.port端口号.pathname路…