如何实现酷狗音乐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) // 获取到其他同源标签页同名频道发来的消息
})

关闭监听的方法：

channel.close();

两者是有区别的：

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

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

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