判断是否在当前页面事件方法

页面可见性

页面可见性介绍

长期以来我们一直缺少一个判断用户是否正在浏览某个指定标签页的方法。用户是否去看别的网站了?他们切换回来了吗?现在html5里页面可见性接口就提供给了程序员一个方法,让他们使用visibilitychange页面事件来判断当前页面可见性状态,并针对性的执行某些任务。同时还有新的document.hidden属性可以使用

代码段


```go
<body>
    <p>页面可见性示例</p>
    <script>
        document.addEventListener("visibilitychange", function() {
            if (document.visibilityState === "hidden") {
                document.title = "去哪儿了?快回来"
            }
            if (document.visibilityState === "visible") {
                document.title = "页面可见性示例"
            }
        })
    </script>
</body>
  • document.hidden:这个新出现的document.hidden属性,它显示页面是否为用户当前观看的页面,值为true或false
  • document.visibilityState :visibilityState 的值要么是visible,表明页面为浏览器当前激活tab,而且窗口不是最小化状态;要么是hidden,表示页面不是当前激活tab页面,或者窗口最小化了;或者prerender,表示页面在重新生成,对用户不可见。
  • visibilitychange事件:监听页面可见性变化事件
    判断是否在当前页面事件方法_第1张图片

你可能感兴趣的:(好记性不如难笔头,学习记录,工作中遇到的问题,前端,javascript,html)