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 来判断当前页面是显示状态还是隐藏状态。

相关推荐
naice2 小时前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼2 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin2 小时前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗2 小时前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀6962 小时前
CSS-响应式布局
前端
三小河2 小时前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法2 小时前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku2 小时前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀6962 小时前
2025-35st-w-日常开发总结
前端
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js