当前位置: 首页 > news >正文

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

大致有两种思路,

一种是通过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。

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

相关文章:

  • GEM5 Garent CPU cache消息传递路径:1. NI部分
  • redis基本用法学习(C#调用CSRedisCore操作redis)
  • 动态代理jdk的Proxy与Spring的CGlib
  • Python之Django项目的功能配置
  • 音视频的编码格式与封装格式
  • 图像识别SLIC、Haralick texture features(自备)
  • 3.1 C语言之控制流语句
  • 【四】记一次关于架构设计从0到1的讨论
  • prometheus二进制安装
  • 【Flink-Kafka-To-ClickHouse】使用 Flink 实现 Kafka 数据写入 ClickHouse
  • SSTI模板注入基础(Flask+Jinja2)
  • 前端验收测试驱动开发
  • 高并发情况下,数据库与缓存数据不一致问题
  • WorkPlus超级APP助力企业节省IT人力成本,实现快速移动化
  • ARM学习(24)Can的高阶认识和错误处理
  • 2017 年终总结 —— 在路上
  • Cookie 在前端中的实践
  • CSS 专业技巧
  • CSS居中完全指南——构建CSS居中决策树
  • GDB 调试 Mysql 实战(三)优先队列排序算法中的行记录长度统计是怎么来的(上)...
  • HTTP中的ETag在移动客户端的应用
  • Linux学习笔记6-使用fdisk进行磁盘管理
  • Promise面试题2实现异步串行执行
  • SpringBoot 实战 (三) | 配置文件详解
  • unity如何实现一个固定宽度的orthagraphic相机
  • 关于Java中分层中遇到的一些问题
  • 前端性能优化——回流与重绘
  • 让你成为前端,后端或全栈开发程序员的进阶指南,一门学到老的技术
  • 使用前端开发工具包WijmoJS - 创建自定义DropDownTree控件(包含源代码)
  • 测评:对于写作的人来说,Markdown是你最好的朋友 ...
  • 机器人开始自主学习,是人类福祉,还是定时炸弹? ...
  • ​​​​​​​sokit v1.3抓手机应用socket数据包: Socket是传输控制层协议,WebSocket是应用层协议。
  • #我与Java虚拟机的故事#连载01:人在JVM,身不由己
  • (1/2)敏捷实践指南 Agile Practice Guide ([美] Project Management institute 著)
  • (3)Dubbo启动时qos-server can not bind localhost22222错误解决
  • (bean配置类的注解开发)学习Spring的第十三天
  • (DenseNet)Densely Connected Convolutional Networks--Gao Huang
  • (超简单)使用vuepress搭建自己的博客并部署到github pages上
  • (分享)自己整理的一些简单awk实用语句
  • (附源码)springboot课程在线考试系统 毕业设计 655127
  • (附源码)ssm本科教学合格评估管理系统 毕业设计 180916
  • (四)docker:为mysql和java jar运行环境创建同一网络,容器互联
  • (推荐)叮当——中文语音对话机器人
  • ****Linux下Mysql的安装和配置
  • .Net多线程总结
  • .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验
  • .net专家(高海东的专栏)
  • .sdf和.msp文件读取
  • /var/lib/dpkg/lock 锁定问题
  • @JoinTable会自动删除关联表的数据
  • [20170713] 无法访问SQL Server
  • [ai笔记9] openAI Sora技术文档引用文献汇总
  • [CakePHP] 在Controller中使用Helper
  • [ccc3.0][数字钥匙] UWB配置和使用(二)
  • [CF]Codeforces Round #551 (Div. 2)