美文网首页
标签页切换 实时监听

标签页切换 实时监听

作者: Tiny_z | 来源:发表于2018-05-21 16:45 被阅读40次

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

    这里我们可以用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);
    
    效果

    演示地址
    参考

    相关文章

      网友评论

          本文标题:标签页切换 实时监听

          本文链接:https://www.haomeiwen.com/subject/fecqjftx.html