同域跨页面监听

2024年5月16日 167次阅读 来源: vczhan

今天用百度音乐听歌，在一个页面点击播放，会打开音乐盒页面播放歌曲，再点另一首歌点播放，不会再打开一个新的音乐盒页面，而是在原来的音乐盒页面播放，感觉挺牛逼的。

同一个浏览器，打开几个页面，如果是同一个域的，会共享cookie，所以假设选歌的页面为A页面，音乐盒的页面为B页面，当点击A页面播放按钮时，就写一条cookie，而在B页面上设置一个定时器，不断去查询cookie有没有变化，然后做进一步处理。

用cookie还是挺麻烦的，还有另一个同样会共享的东西就是Storage，并且它有一个onstorage方法可以监听Storage的变化，那就方便多了。简单写一个事例。目标是在A页面点击按钮，如果B页面未打开，则打开B页面并接受数据；如果B页面已经打开了，则直接接受数据。以下B页面要接受A页面传的 id 值存在是 new 里，用 isLogin 判断B页面是否打开了。

A.html

var id = 0;
// 为了方便，这里用一个变量记录
var flag = false;

btn.onclick = function () {
    id++;
    addItem();
}

function addItem() {
    var isLogin = localStorage.getItem('isLogin');
    if (isLogin) {
        localStorage.setItem('new', id);
    } else {
        window.open('./B.html');
        flag = true;
    }
}

window.addEventListener('storage', function (e) {
    if (flag && e.key === 'isLogin') {
      flag = false;
      addItem();
    }
}, false);

B.html

// 打开了就添加记录
localStorage.setItem('isLogin', 1);

window.onbeforeunload = function () {
    // 关闭则删除记录，意外关闭就没办法了
    localStorage.removeItem('isLogin');
}

window.addEventListener("storage",function(e){
     if (e.key === 'new') {
          console.log(e.newValue);
     }
},false);

当然百度音乐肯定不是这么简单的了，也许是用其他通信方式~~~

    原文作者：vczhan
    原文地址: https://segmentfault.com/a/1190000000684767
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞