页面的隐藏或显示：hidden与visibilityState
2024-09-01 05:20:58
我们在很多地方都需要判断用户是不是在当前页面，如果离开了当前页面我们需要捕捉到并进行一些操作.
例如：当视频处于播放状态时，我们需要判断用户是不是在当前页面以继续播放，如果离开了我们需要暂停播放。
有两种方法：
- document.hidden
- document.visibilityState
visibilitychange
选项卡可见或隐藏的时候将触发visibilitychange事件
document.hidden
这个新出现的document.hidden属性，它显示页面是否为用户当前观看的页面，值为ture或false。
这里我们用选型卡隐藏或显示来改变title当例子
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
document.title = '(つェ⊂)我藏好了哦~ ';
}
else {
document.title = '(*´∇｀*) 被你发现啦~ '
}
});
document.visibilityState
visibilityState的值要么是visible (表明页面为浏览器当前激活tab，而且窗口不是最小化状态)，要么是hidden (页面不是当前激活tab页面，或者窗口最小化了。)，或者prerender (页面在重新生成，对用户不可见。)
document.addEventListener('visibilitychange', function () {
if (document.visibilityState == 'hidden') {
document.title = '(つェ⊂)我藏好了哦~ ';
} else {
document.title = '(*´∇｀*) 被你发现啦~ '
}
});
到这就结束了这篇文章，很有意思的小功能
最新文章
- 报错：init: Could not find wglGetExtensionsStringARB!
- Java中事务的概念
- U盘启动盘 安装双系统 详细教程
- css学习笔记 2
- JSTL 将double值保留小数点后两位
- C#EXCEL 操作类--C#DataToExcel帮助类
- flume ng系列之——flume安装
- C++的双冒号（域解析符）
- ASP.NET MVC开发必看系列
- js将格式化的时间转换成时间戳
- JavaScript实现淡入淡出
- SPOJ 1812 Longest Common Substring II
- ruby创建某些“关键字”方法别名的语法
- mysql的学习笔记（二）
- thinkphp5图片上传接口
- MySQL相关问题题
- loadrunner笔记（二）：飞机订票系统--客户信息注册
- Python的set集合详解
- 【Linux】通过top语句可以查看压力测试的实时服务器状态。（可以通过百度Linux top查看相关内容）
- OpenSSL再曝CCS注入漏洞-心伤未愈又成筛子