Ethan Zhu
©️朱俊辉
All Rights Reserved.

如何判断网页有没有被用户浏览?-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) {
            // 进入前台,用户正在浏览
            document.title = '页面正在浏览';
        }
 });
2018-01-19

发表评论