简介

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

Code

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

这里我仅仅判断了 hidden

<script type="text/javascript">
// 监听 visibility change 事件
document.addEventListener('visibilitychange',function(){
var isHidden = document.hidden;
if(isHidden){
document.title = '死鬼,你去哪儿了';
} else {
document.title = '你终于回来了啊';
}
}
);
</script>

 

 

js判断用户是否离开当前页面的更多相关文章

  1. js判断用户是客户端还是移动端

    js判断用户是客户端还是移动端 Javascript 判断客户端是否为 PC 还是手持设备,有时候项目中需要用到,很方便的源生检测,方法一共有两种   1.第一种: function IsPC() { ...

  2. 利用HTML5判断用户是否正在浏览页面技巧

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

  3. js判断滚动条是否已到页面最底部或顶部实例

    原文 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐 ...

  4. js判断用户关闭页面或浏览器

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  5. js判断用户的浏览器设备是移动端还是pc端

    最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="te ...

  6. [开发笔记]-js判断用户的浏览设备是移动设备还是PC

    最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="te ...

  7. js判断用户是在PC端或移动端访问

    js如何判断用户是在PC端和还是移动端访问.  最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的体验.伴随Android平台的红火发展.不仅带动国内智能手机行业,而 ...

  8. js判断用户是否正在滚动滚动条,滚动条滚动是否停止

    js智能判断是否可以自动滚动 比如,做一个音乐播放器,边播放,边定位歌词,播放的时候,需要自动定位到播放语句,但是用户去拖动或者滚动div(歌词面板)时,这时就必须停止自动滚动,或者说是不能自动滚动, ...

  9. [JS] js 判断用户是否在浏览当前页面

    var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : ...

随机推荐

  1. Android 创建自定义 View 的属性 (attrs) 时需要注意的问题

    自定义 View 的属性并不难,可以参照官方的文档 https://developer.android.com/training/custom-views/create-view.html 但是需要注 ...

  2. call、apply、bind的异同

    一.call.apply.bind的异同 JavaScript中函数可以通过3种方法改变自己的this指向,它们是call.apply.bind.它们3个非常相似,但是也有区别.下面表格可以很直观看出 ...

  3. iOS 代码混淆的简单使用

    1.工具下载  http://stevenygard.com/projects/class-dump/  选择dmg安装包 2.打开终端输入:open/usr/local/bin 3. 4.修改权限在 ...

  4. 深度学习笔记(六)VGG14

    Very Deep Convolutional Networks for Large-Scale Image Recognition 1. 主要贡献 本文探究了参数总数基本不变的情况下,CNN随着层数 ...

  5. numpy的ravel()和flatten()函数比较

    功能 两个函数的功能都是将多维数组降为一维. 用法 import numpy as np arr = np.array([[1, 2],[3, 4]]) arr.flatten() arr.ravel ...

  6. openssl生成RSA格式的公私钥,并转为pkcs8格式

    第一步:生成私钥,这里我们指定私钥的长度为2048 openssl genrsa -out rsa_private_key.pem 2048 第二步:根据私钥生成对应的公钥: openssl rsa ...

  7. python中del函数的垃圾回收

    今天学习面向对象里的类被del函数的垃圾回收过程搞的晕头转向,经过了老师的讲解还是是懂非懂,然后看了很多博客慢慢的心里才有了个大概的了解. 刚刚看到一篇博客,觉得讲的很好,转载过来以供参考.以下转自笨 ...

  8. linux文件映射到windows(方便用虚拟机搭建linux服务器,用本地windows代码编辑)

    1,安装docker: https://docs.docker.com/install/linux/docker-ce/centos/ 2,linux上创建好需要共享的目录 /data/share(可 ...

  9. Android 中的冷启动和热启动

    App的Activity退出之后,应用的进程并不会被杀死,而是保留在那里.当再次打开App的Activity时,会从已有的进程中创建Activity,是为“热启动”.若打开Activity时没有进程, ...

  10. MYSQL 复制详解

    MySql 复制介绍 MySQL复制允许将主实例(master)上的数据同步到一个或多个从实例(slave)上,默认情况 下复制是异步进行的,从库也不需要一直连接到主库来同步数据 MySQL复制的数据 ...