通过HTML5 Visibility API检测页面活动状态

最新推荐文章于 2023-11-30 15:17:38 发布
最新推荐文章于 2023-11-30 15:17:38 发布
阅读量816 收藏
点赞数
分类专栏： jquery html5 javascript 文章标签： jquery html5 javascript ios api
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jjfat/article/details/39316071
版权
jquery 同时被 3 个专栏收录
233 篇文章 0 订阅
订阅专栏
javascript
102 篇文章 0 订阅
订阅专栏
html5
67 篇文章 0 订阅
订阅专栏

几年前，我们浏览网页的时候是没有选项卡浏览模式的，每一个网页都会是一个浏览器窗口，如果我没有记错，Win7之前我们都是这样浏览网页的。作为一个程序员，我们经常会同时打开10-15个网页，多的时候超过20个也不足为奇。

为什么要使用这个API?

早期我们没有办法确定哪些选项卡是活动状态的，但是现在通过HTML Visibility API，我们可以检测访客是否正在浏览我们的界面。

在这个教程中我们会介绍如何使用HTML5 Visibility API，同时我们也为你准备了一个简单的demo来查看页面的状态。在demo中，我们将会根据页面的状态来修改文档的标题。

查看页面的状态

随着这个API的出现，我们又迎来了两个新的document属性，他们分别是document.visibilityState和document.hidden。

document.visibilityState 有四个可选值：

  • hidden: 页面在任何屏幕上都没有被浏览。

  • prerender: 页面在选项卡中，但访客现在没有在这个选项卡上。

  • visible: 访客正在浏览。

  • unloaded: 页面已经被加载过了，现在跳转在其它界面上了。

document.hidden是一个布尔类型的属性。

现在我们可以根据页面状态来控制我们的网站了。

现在我们可以马上知道我们页面的availability属性了。但是首先我们要做的是监听这个事件，这样一来我们就可以做出相应的事情。我已经写好了一个简单的监听事件：

......

......

阅读原文：通过HTML5 Visibility API检测页面活动状态

thegeek
关注
专栏目录
js 两个数组对象合并成一个数组对象
m0_38109616的博客
10-14 738
js 两个数组对象合并成一个数组对象
使用 Page Visibility API 检测空闲或活动的浏览器选项卡
我的博客，不一样的自我表达
05-24 87
我们首先需要定义一个在页面可见性事件被触发时EventListener调用函数的函数：toggleVideoPlaybackvisibilitychange。如果这等于true视频将暂停，如果它等于false视频将继续播放。您现在可以继续在浏览器中测试此代码，当您在播放视频时导航到另一个选项卡时记下时间戳，以确认您返回时视频已暂停。在本教程中，我们将使用页面可见性 API 来检测浏览器选项卡是空闲的（当前未被查看）还是活动的。为了了解 API 的工作原理，我们将使用它在选项卡空闲时暂停视频。
判定当前页面是否处于活动页面
itmacy的博客
03-28 224
判定当前页面是否处于活动页面。
判断页面是否为html,HTML5中怎么判断用户是否正在浏览页面
weixin_30938397的博客
06-03 348
满意答案alc2942482017.05.10采纳率：49%等级：9已帮助：2667人用JS来判断：function myBrowser() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isChrome = userAgent.indexOf("Chrome") > -1; //判断是否Chrome浏览器...
多个对象添加到一个空的数组js_JavaScript数组及部分API介绍
weixin_39833763的博客
12-03 1949
本博客介绍的内容如下：1、创建数组的一般用法；2、数组对象与普通对象的一些对比；3、伪数组；4、数组对象与字符串对象的一些对比；5、数组window.array的API——forEach、sort；6、数组window.array的API——join、concat、map、filter、reduce；7、部分总结MDN关于数组的介绍链接Array​developer.mozilla.org1、创建...
把单独多条对象放在数组中
qq_40576178的博客
03-29 918
let zhData={ name:'综合', meetNum: this.allNumber} let yfhg={ name:'依法合规', meetNum: this.yfhgNumber} let wrfz={ name:'污染防治', meetNum: this.wrfzNumber} let stzl={ name:'生态治理', meetNum: this.stzlNumber} let jnjt={ name:'节能减碳', .
5 个强大的HTML5 API 函数推荐
09-28
页面可见性API用于检测用户是否当前正在查看某个网页，这对于优化资源加载、暂停非活动页面的动画等场景非常有用。下面展示了如何使用Page Visibility API： ```javascript var hidden, state, visibilityChange; ...
HTML5中判断用户是否正在浏览页面的方法
09-28
HTML5引入了一项重要的特性，即页面可见性接口（Page Visibility API），这使得开发者能够检测用户是否当前正在查看他们的网页。这一功能对于优化用户体验、节省资源以及实现更智能的交互至关重要。页面可见性接口...
HTML5高性能编程与Web性能优化
4. **Page Visibility API**：这个API允许开发者检测页面的可见状态，例如是否在后台标签页或被最小化，这对于优化非活动时的脚本执行和资源消耗特别有用。 5. **Script-based animations and Efficient script ...
JS 将几个对象存入数组中的简便写法
不知名人士的博客
07-19 4776
那当然是ok，但是带来的问题是代码实在太多了，如果这要是几百个对象，岂不是要手动创建几百个对象。一般第一想法会是什么呢？手动创建上方所示的对象，然后一个一个push进数组。仅支持两个键值对以内的对象。...
js将数组中多个对象合并为一个对象
weixin_46389242的博客
09-30 1294
【代码】js将数组中多个对象合并为一个对象。
Vue如何把多个对象合并到一个数组里？
weixin_42220130的博客
09-01 3650
【代码】Vue如何把多个对象合并到一个数组里？
ES6 数组对象的基本操作
程序猿么么的博客
08-10 774
ES6 数组对象的基本操作 去重 var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]; // 方法一 var uniqueFruits = Array.from(new Set(fruits)); console.log(uniqueFruits); // returns [“banana”, “apple”, “orange”, “watermelon”, “grap
Day 90/100 （JS） [] + {} 空对象和空数组相加
xinghuowuzhao的博客
01-18 656
写在前面的话 今儿被空数组和空对象相加整懵了... 举个栗子 console.log({} +[]); 这是啥？看不懂... 一个一个来 console.log({}); 打印这个是 {} console.log([]); 打印这个是 [] 没毛病，但俩加起来会打印出 [object Object] 观察到，第一个o小写，第二个O大写 为啥？ 是因为+（加号运算符） 试着运行了下 上面同样的把{}当作区块语句的情况又会发生，不过这次所有..
讲讲ES6中 对象合并
最新发布
m0_74359467的博客
11-30 1128
Object.assign() 方法接受一个目标对象和一个或多个源对象，并将源对象的属性合并到目标对象中。请注意，Object.assign() 方法会修改第一个参数的值，所以我们通常使用一个空对象作为目标对象，以确保原始对象不会被修改。在 JavaScript 中，可以使用不同的方法来合并对象的属性。无论你使用哪种方法，都能够将多个对象的属性合并到一个新的对象中，从而实现对象合并的操作。它将每个对象的属性展开到新对象中，从而实现合并的效果。对象合并不仅可以合并顶层属性，还可以合并嵌套的对象属性。
js 把对象存入数组中
热门推荐
q_2540638774的博客
08-12 2万+
var params = []; var info= { "张三" : "21", "李四" : "32", "王五" : "14", "小红" : "31", "小兰" : "24", "王明" : "22", }; for ( var key in info) { var param = {}; param.name= key; param.age= info[key]; params.push(param); } console.log(params)； //结果[
前端js把对象存入数组中
骨子里的偏爱
03-31 846
js 把对象存入数组中
数组中添加对象 & 通过递归数组，给数组中的对象添加新字段 & $set给对象添加新属性 & 遍历唯一ID标识-随机数或时间戳
weixin_44867717的博客
05-20 6704
数组中添加对象 & 通过递归数组，给数组中的对象添加新字段 & $set给对象添加新属性 & 遍历唯一ID标识-随机数或时间戳 1、空数组中添加对象 var cardNumArr = []; //定义一个空的数组 var cardNumObj = {}; //定义一个空的对象 cardNumObj = { name: '李白', id: 1 }; cardNu
HTML5实战：新特性与API应用
8. **性能优化**：了解如何利用Resource Timing API、User Timing API和Page Visibility API来监测和优化网页性能。 本书旨在帮助开发者充分利用HTML5的潜力，适应不断变化的浏览器环境，创建更具创新性和用户体验...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值