同域跨页面监听

660 查看

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


同一个浏览器,打开几个页面,如果是同一个域的,会共享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);

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