标签页切换 实时监听

有时我们在网页浏览视频,或者看一些幻灯片的时候,需要在用户切换标签页的时候能够自动暂停,当用户切换回来时,再自动播放

这里我们可以用visibilitychange这个事件,它是当页面处于切换或者隐藏的时候,能够触发的事件,结合document.visibilityState来判断当前页面是否处于显示状态

document.addEventListener('visibilitychange',function(e){
            var ele = document.createElement('p');

            if(document.visibilityState === 'visible'){
                ele.innerHTML = '回来了';
                document.body.appendChild(ele);
            }else{
                ele.innerHTML = '又跑了';
                document.body.appendChild(ele);
            }
        },false);
标签页切换 实时监听_第1张图片
效果

演示地址
参考

你可能感兴趣的:(标签页切换 实时监听)