如何判断网页有没有被用户浏览?-visibilitychange

• 1.如何判断H5页面有没有被用户浏览?
• 2.当用户没有浏览页面我们需要做一些操作,例如背景音乐暂停,定时器清空,电影暂停等等一系列操作
• 3.我们怎么知道网页有没有被浏览呢?或者网页有没有没有进入最小化呢?
  接下来给大家介绍HTML5新增的API, visibilitychange, document.hidden, document.visibilityState

1.visibilitychange事件用于监听网页发生变化(进入后台,进入前台)

• 1.浏览器支持 visibilitychange 是HTML5的API所以支持持最新浏览器 Chrome, Firefox, IE10+
• 2.使用, 用addEventListener添加事件,当页面发生改变就会调用这个函数

document.addEventListener('visibilitychange', function () {
});

ps: 老版本浏览器如果失效需要添加前缀

• mozvisibilitychange 火狐
• msvisibilitychange IE
• webkitvisibilitychange 谷歌,Safari

2.document.hidden

• false-当前网页正在被用户浏览
• ture-当前网页进入后台

3.document.visibilityState

• visible 页面为浏览器当前激活,窗口不是最小化状态
• hidden 页面不是当前激活,或者窗口最小化了
• prerender 页面在重新生成,对用户不可见

4.判断网页进入前台还是后台

document.addEventListener('visibilitychange', function () {
        console.log(document.hidden);
        console.log("visibilityState " + document.visibilityState);
        if (document.hidden) {
            // 进入后台不被用户浏览
            document.title = '页面进入后台';
        } else if (document.hidden == false) {
            // 进入前台,用户正在浏览
            document.title = '页面正在浏览';
        }
 });

持续更新使用的干货,关注军哥给你惊喜
微博coderYJ
简书coderYJ
微信公众号coderYJ