监听浏览器窗口的可见性-动态设置document.title

长期以来我们一直缺少一个判断用户是否正在浏览某个指定标签页的方法。用户是否去看别的网站了？他们切换回来了么？

现在，HTML5里页面可见性接口就提供给了程序员一个方法，让他们使用visibilitychange页面事件来判断当前页面可见性的状态，并针对性的执行某些任务。同时还有新的document.hidden属性可以使用。

document.hidden

这个新出现的document.hidden属性，它显示页面是否为用户当前观看的页面，值为ture或false。

document.visibilityState

visibilityState的值要么是visible (表明页面为浏览器当前激活tab，而且窗口不是最小化状态)，要么是hidden (页面不是当前激活tab页面，或者窗口最小化了。)，或者prerender (页面在重新生成，对用户不可见。).

visibilitychange事件

监听页面可见性变化非常容易：

varthisTitle = document.title;

function handleVisibilityChange() {

    if (document.hidden) {

        document.title ="(●—●) | "+ thisTitle;

    } else {

        document.title = thisTitle;

    }

}

//监听页面状态

document.addEventListener("visibilitychange", handleVisibilityChange,false);

摘自：https://www.cnblogs.com/doocii/p/5080030.html