js 判断用户是否离开当前页面

news/2024/7/19 14:41:43 标签: js

简介

VisibilityChange 事件;用于判断用户是否离开当前页面

在这里插入图片描述

Code

js">// 页面的 visibility 属性可能返回三种状态 
// prerender,visible 和 hidden 
let pageVisibility = document.visibilityState; 
// 监听 visibility change 事件 
document.addEventListener('visibilitychange', function() {
  // 页面变为不可见时触发 
  if (document.visibilityState == 'hidden') { ... } 
  // 页面变为可见时触发 
  if (document.visibilityState == 'visible') { ... } 
  }
);

这里我仅仅判断了 hidden

js"><script type="text/javascript">

// 监听 visibility change 事件

document.addEventListener('visibilitychange',function(){

var isHidden = document.hidden;

if(isHidden){

document.title = '死鬼,你去哪儿了';

} else {

document.title = '你终于回来了啊';

}

}

);

</script>

document.visibilityState 监听浏览器最小化

document.hidden:表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 (注意,页面被其他软件遮盖并不算隐藏,比如打开的 sublime 遮住了浏览器)。

document.visibilityState:表示下面 4 个可能状态的值

hidden:页面在后台标签页中或者浏览器最小化

visible:页面在前台标签页中

prerender:页面在屏幕外执行预渲染处理 document.hidden 的值为 true

unloaded:页面正在从内存中卸载

Visibilitychange事件:当文档从可见变为不可见或者从不可见变为可见时,会触发该事件。

这样,我们可以监听 Visibilitychange 事件,当该事件触发时,获取 document.hidden 的值,根据该值进行页面一些事件的处理。


http://www.niftyadmin.cn/n/1836895.html

相关文章

php foreach两个,用PHP(Foreach)连接两个不同服务器中的两个表

我在两个不同的服务器上有两个数据库。在database2的orders表中有我需要的信息,例如列import和shipping。$allarray();// get 100 Records from 30 000 Records (Database1) because i work with pagination$ordersFromDB1"SELECT * FROM orders LIMIT 0,100";// get…

一款.net性能分析工具

以前一直是用ANTS Profiler进行.net程序的性能分析,但是有使用天数的限制&#xff0c;所以个人出于学习研究的目的&#xff0c;做了下破解。具体参见&#xff1a; http://www.cnblogs.com/studyzy/archive/2007/11/14/959507.html 最近又发现了一款不错的.net程序的性能分析工具…

MSSQL注入防范安全策略大全

前SQL INJECTION的攻击测试愈演愈烈&#xff0c;很多大型的网站和论坛都相继被注入。这些网站一般使用的多为SQL SERVER数据库&#xff0c;正因为如此&#xff0c;很多人开始怀疑SQL SERVER的安全性。其实SQL SERVER 2000已经通过了美国政府的C2级安全认证-这是该行业所能拥有的…

ubuntu下设置QuickSynergy实现鼠标键盘共享

今天把笔记本带到办公室想跟公司的机器一块使用&#xff0c;查了一下Synergy使用&#xff0c;设置鼠标键盘共享。 网上资料很多&#xff0c;不过设置了很多次都不成功&#xff0c;最后发现说的太绕了&#xff0c;没看明白导致设置的不对&#xff0c;整理一下。 我的两台机器都是…

vue使用 环境安装

安装Node.js 1.下载系统对应版本安装包 安装方法略。。。 下载地址&#xff1a;https://nodejs.org/en/download/ 安装好查看版本 node -v 2安装脚手架 npm install vue-cli -g 检测vue vue -v 3 创建项目 vue init webpack ‘Name’ 4 vs Code 工具中vue代码没有高亮 扩…

一年级关于计算机的手抄报内容是什么,一年级春天来了手抄报内容资料

一年级春天来了手抄报内容资料春天唤醒了大地的万物&#xff0c;给大地带来了希望。做春天来了手抄报可以让我们感受到春天的气息。百分网小编专门收集了春天来了手抄报素材&#xff0c;希望大家喜欢!简单的春天来了手抄报春天来了手抄报内容&#xff1a;春天来了春天来了&…

我的实验日记之网络拓扑图

红线上方为192.168.18.0/24网段&#xff0c;红线下方为172.16.0.0/16网段SERVER硬件&#xff1a;CPU P4 2.4GHz内存 512512MB硬盘 80120GB软件&#xff1a;windwos 2003 R2AD(54rock-liu.cn)DNS(AD集成)DHCP路由和远程访问IISDFSExchange 2003SQL Server 2000瑞星中小企…

php如何缓存id,php – 如何在Symfony 2.4中缓存带有缓存ID和缓存生存期选项的doctrine“findOneBy()”查询?...

我正在使用doctrine 2.4开发symfony 2.5项目.我想缓存查询结果的缓存ID和缓存时间,所以我可以删除缓存结果,只要管理员需要.我能够使用“createQueryBuilder()”选项缓存查询结果.例&#xff1a;$this->createQueryBuilder(some_table)->select(some_table)->where(so…