企业网站推广目标,传媒公司网站建设,关于营销的网站有哪些,自动化系统网站建设大致有两种思路#xff0c;
一种是通过wind.open()方法传第二个参数#xff0c;
A页面#xff1a;
//点击跳转播放页函数function toPlayPage(){window.open(path/xxxx/xxxx?name音乐名,music)//第二个参数写一个定值#xff0c;代表跳转页面都为music标签页#xff0…大致有两种思路
一种是通过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。 标签页之间的信息通讯有很多种场景和方式可以看我这篇文章前端跨页面交互信息或传递信息都有这么几种方式总有一个满足你的使用场景
