HTML中的页面可见性

页面可见性介绍

长期以来一直缺少一个判断用户是否正在浏览某个指定标签页的方法。

用户是否去看别的网站了?他们切换回来了么?

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

常用的 API 如下:

  • document.hidden :这个新出现的 document.hidden 属性,它显示页面是否为用户当前观看的页面,值为 turefalse
  • document.visibilityStatevisibilityState 的值要么是 visible ,表明页面为浏览器当前激活 tab ,而且窗口不是最小化状态;要么是 hidden ,表示页面不是当前激活 tab 页面,或者窗口最小化了;或者 prerender ,表示页面在重新生成,对用户不可见。
  • visibilitychange 事件:监听页面可见性变化事件。

示例:

html 复制代码
<body>
    <p>页面可见性示例</p>
    <script>
        document.addEventListener("visibilitychange", function () {
            if(document.visibilityState === "hidden"){
                document.title = "页面切换了~目前不可见"
            }
            if(document.visibilityState === "visible"){
                document.title = "页面可见性示例"
            }
        });
    </script>
</body>

更多有关页面可见性的内容可以参阅 MDNhttps://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visibility_API

所以,所谓页面可见性,就是获取当前页面的可见状态。因为对于用户来讲可以打开好多标签页面来回切换,然而始终只有一个页面处于显示状态。所以我们可以通过页面可见性(Page Visibility)API 来判断当前页面是显示状态还是隐藏状态。

相关推荐
博客zhu虎康38 分钟前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海1 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏1 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码2 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby2 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹2 小时前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6
excel2 小时前
使用热力贴图和高斯函数生成山峰与等高线的 WebGL Shader 解析
前端
wyzqhhhh2 小时前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
码上暴富2 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
土了个豆子的3 小时前
04.事件中心模块
开发语言·前端·visualstudio·单例模式·c#