专栏首页河湾欢儿的专栏js判断用户进入和离开当前页面

js判断用户进入和离开当前页面

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

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

// 监听 visibility change 事件

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

var isHidden = document.hidden;

if(isHidden){

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

} else {

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

}

}

);

</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 文档宽高及窗口事件

    onscroll:当滚动条滚动的时候触发 onresize:当窗口大小发生改变的时候触发

    河湾欢儿
  • css3选择器

    属性选择器 E[attr]只使用属性名,但没有确定任何属性值 E[type="text"]指定属性名,并指定了该属性的属性值 E[attr~="value...

    河湾欢儿
  • cookie

    河湾欢儿
  • writeup | 应该不是 XSS

    0x01 初步分析阶段 首先拿到题目,看到留言板,第一反应就是XSS。 但是看过题目提示后,有些不确定。 所以开始分析整道题目。 首先,观察network页面,...

    安恒网络空间安全讲武堂
  • Javascript跨域

    如果协议,端口(如果指定了一个)和主机对于两个页面是相同的,则两个页面具有相同的源。

    菜的黑人牙膏
  • 面向对象之类、方法、属性

    前文我们介绍了数组,本文我们来开始介绍一下面向对象,本文会介绍面向对象与面向过程的概念及区别,并且会介绍类、方法、属性、对象的概念。

    开心分享
  • pageadmin网站制作如何添加自定义页面

    网站的需求是很多样化的,比如需要制作一个对外提供数据的api,甚至制作一个搜索页面,或者制作一些数据和栏目没有对应关系的页面,这些页面独立于网站栏目,如果用栏目...

    Almost Lover
  • 原 高效访问海量地图数据--GeoServer手动发布本地Shapefile地图

    首先,本文实现的结果图给大家展现一下: ? 放大的样子: ? 颜色是通过属性中某个字段值来分级的,可以自定义。 上面功能是用ArcGIS切片好数据,在Geose...

    我叫刘半仙
  • 生活类App原型制作分享-AnyList

    AnyList是一款可以帮你创建购物清单,并且帮助你整理食谱的生活工具App,前面引导页采用图片+文字的方式,介绍App的用法,登录注册采用选项卡切换的方式,减...

    奔跑的小鹿
  • 新项目为什么要使用BANCOR协议发行代币

    为了讲叙的方便,我们把原有的发币方式叫做直接发币,区别于使用BANCOR协议发币。

    凌帅出口

扫码关注云+社区

领取腾讯云代金券