本文主要是介绍如何实现酷狗音乐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。
标签页之间的信息通讯有很多种场景和方式，可以看我这篇文章前端跨页面交互信息或传递信息都有这么几种方式，总有一个满足你的使用场景
这篇关于如何实现酷狗音乐pc页面点击播放时，打开多个歌曲播放时，始终在一个播放页面，（标签页的通讯）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
