如何实现酷狗音乐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。

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

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

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

相关文章

Redis进阶之内存模型

转载自 Redis进阶之内存模型 前言 Redis是目前最火爆的内存数据库之一,通过在内存中读写数据,大大提高了读写速度,可以说Redis是实现网站高并发不可或缺的一部分。 我们使用Redis时,会接触Redis的5种对象类型(字符…

C#将引入可空的引用类型

是的,标题没错。C#其中一份新提案假定,所有的引用类型在默认情况下都是不可空的。在新语法下,你需要显式地标明一个引用变量是可空的,就像对值类型所做的那样。 和值类型一样,T是指不可空类型,而T?是指可…

Android中SlidingDrawer开发报错You need to use a Theme.AppCompat theme (or descendant) with this activity.

Android抽屉开发报错You need to use a Theme.AppCompat theme (or descendant) with this activity. 方法1: 创建的activity时,如果不是那么强烈需要继承自AppCompatActivity,就直接继承Activity。 如将activity继承自AppCompatActivity&…

Redis进阶之持久化

转载自 Redis进阶之持久化 一、Redis高可用概述 在介绍Redis高可用之前,先说明一下在Redis的语境中高可用的含义。 我们知道,在web服务器中,高可用是指服务器可以正常访问的时间,衡量的标准是在多长时间内可以提供正常服务&am…

未来的.NET之多重继承

通过抽象接口引入有限形式的多重继承,这一.NET新提议颇具争议性。该特性是受Java默认方法(Default Methods)的启发。 默认方法的目的在于允许开发人员修改已发布的抽象接口。修改已发布接口将会产生破坏性的更改,因此在Java和.NE…

React中的方法调用

onClick{demo}//可以调用函数 onClick{demo()}//返回的是undefide

企业级负载均衡如何实现

转载自 企业级负载均衡如何实现 负载均衡简介 首先,我们来了解一下什么是负载均衡: 在一个大型网站中,在线用户有时可能有几千个甚至上万个之多。如果一个用户的请求需要服务使用0.02秒来处理,那么该服务实例每秒钟将只能处理…

微服务架构师的职责——《微服务设计读书笔记》

如何定义架构师 架构师从英文单词Architect翻译而来,在英文中,Architect原来的意思是“建筑师”。作者吐槽英文中架构师与传统的建筑师单词相同,但实际的工作性质并不相同,以致于在英文的语境中会造成理解上的差异。 传统的建筑师…

Android RaingBar评分条的使用

概述 RatingBar是基于SeekBar和ProgressBar的扩展,用星型来显示等级评定。使用RatingBar的默认大小时,用户可以触摸/拖动或使用键来设置评分,它有两种样式(小风格用ratingBarStyleSmall,大风格用ratingBarStyleIndicator)&#x…

理解C# 4 dynamic(1) - var, object, dynamic的区别以及dynamic的使用

一. 为什么是它们三个? 拿这三者比较的原因是它们在使用的时候非常相似。你可以用它们声明的变量赋任何类型的值。 看看下面的示例: var a 1;object b 1; dynamic c 1; 你还可以使用关键字为它们赋上更加复杂的类型 var a new string[]{"1"};object b new …

获取笔记本的SHA1的值。

开发Android几年来,经常出现这样的情况,每次使用到地图的时候,不知道如何获得笔记本的SHA1值,尤其是在跟换笔记本开发的时候。 因此在CSDN上做一下笔记! 进入cmd模式 cd C:\Users\Administrator.android> 输入keyto…

建模:确定服务的边界——《微服务设计》读书笔记

什么样的服务才是好的服务? 高内聚、松耦合的服务才是好的服务。简而言之,就是把相关性强的放在一起,相关性不强的分开,物以类聚,人以群分,服务的划分也是这样。这就需要确定什么要放在一起,什么是要分开的…

谈谈系统稳定性设计

转载自 谈谈系统稳定性设计 一、差旅随想 因为base在分公司,需要经常去总部出差,所以搭乘飞机成了家常便饭,很多时候坐在飞机上会不由的感叹,设计制造这样精密复杂的机器的那帮人真的是了不起,他们是怎样保证这样一台…

Android使用MPAndroidChat

参考文档: https://blog.csdn.net/u013184970/article/details/52095170 https://blog.csdn.net/cen_yuan/article/details/52204281 注意: 在要使用的module的build.gradle添加: dependencies { compile ‘com.github.PhilJay:MPAndroidChart:v3.0.0-be…

微服务集成——《微服务设计》读书笔记

一.理想的集成应该是什么样的? 1.避免破坏性修改 如果在一个微服务的响应中添加一个字段,服务的消费方不应该受到影响。 2.保证API的技术无关性 微服务之间的通信应该是与技术无关的。 3.使服务的消费方易于使用 如果消费方使用该服务比登天还难&…

什么是加密算法

转载自 什么是加密算法 Java的加密知识也是Java常见的领域之一,加密技术的底层确实很复杂,运用了大量的数学知识,要弄明白非常复杂。但是Java语言中运用密码加密工具却是非常简单。我们在Java里面运用这些加密技术,只需要把原理…

Android传感器的使用

Android 中主要的传感器有以下几种 TYPE_ACCELEROMETER 加速度传感器又叫 G-sensor,该数值包含地心引力的影响,单位是 m/s 测量应用于设备 x 、y、z 轴上的加速度。 将手机平放在桌面上,x 轴默认为0,y 轴默认0,z 轴默…

理解C# 4 dynamic(2) – ExpandoObject的使用

ExpandoObject的使用非常简单,很容易入手。上一篇里面已经有详细的介绍了,可以看这里(理解C# 4 dynamic(1) - var, object, dynamic的区别以及dynamic的使用) 下面对ExpandoObject的使用场合和一些认为需要注意的地方,谈一下自己的看法: 一…

谈谈服务限流算法的几种实现

转载自 谈谈服务限流算法的几种实现 保障服务稳定的三大利器:熔断降级、服务限流和故障模拟。今天和大家谈谈限流算法的几种实现方式,本文所说的限流并非是Nginx层面的限流,而是业务代码中的逻辑限流。 为什么需要限流 按照服务的调用方&…