JS判断用户是否在浏览当前页面

2018-03-03

之前在浏览某网站的时候发现，当正在浏览这个网站的页面是，浏览器Tab的title是一些文字，当切换Tab切换到别的页面的时候，title内容变成的另一些文字，这个效果感觉不错，能够吸引用户。想实现这一效果，需要用JS来判断更改title内容。

这里需要用到document.hidden这一API来判断页面是否可见，它的值返回的类型为boolean，当为true的时候，表示页面不可见，当为false的时候，表示页面可见。

搜索这一API知道它的用法：

document.addEventListener("visibilitychange", function() {
    console.log( document.hidden );
    // 想要实现效果的代码
});

但这一API有兼容性问题，它的兼容性为：IE10+，Firefox10+，Chrome14+，Opera12.1+，Safari7.1+，所以在代码中要做兼容性处理

兼容性写法示例：

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>欢迎浏览</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <script>
        var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null;

        var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');

        var onVisibilityChange = function(){
            var title = document.querySelector('title');
            if(!document[hiddenProperty]){
                title.innerHTML = '欢迎浏览'
            }else{
                title.innerHTML = '记得再来'
            }
        }

        document.addEventListener(visibilityChangeEvent, onVisibilityChange)
    </script>
</body>
</html>

当浏览此页面的时候，标题显示为“欢迎浏览”，当离开此页面的时候，标题显示为“记得再来”。即使在不兼容这一API的浏览器中打开，标题总是显示为“欢迎浏览”，也不会有很大的影响。

同时也可以根据这一API来做更多想要的效果。