QQ咨询 官方微信

添加微信好友

官方小程序

百度小程序

微信小程序

头条小程序

关于我们

js教程

js监听浏览器当前页面的显示与隐藏

 admin  2022-12-04 19:54:32
今天看一个网站,看完之后随手切换到了其他页面,突然发现刚才看的这个网站变成了“**社区”了,以为是挂马了,出去好奇切换回去发现又恢复了,感觉挺好玩的,于是研究了一下


原理
一、visibilitychange

浏览器的标签页被隐藏或显示的时候都会触发 visibilitychange 这个事件。
通过 visibilitychange 这个事件,我们可以在标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询、还可以停止一些诸如轮播等循环的动画效果等等。这些可以节省服务器和本地的开销。
document 中定义了两个只读的属性 hidden 和 visibilityState 用来标识浏览器的当前状态。
document.hidden 是一个布尔值,用来标识页面是否处于隐藏状态
document.visibilityState属性更为详细,有4个状态
visible 页面内容至少部分可见。这意味该页面必须是一个非最小化的前置选项卡(即使全部被遮挡依然是visible,当前选项卡处于前置状态)
hidden 页面内容不可见
prerender 网页内容被预渲染并且用户不可见。
unloaded 如果文档被卸载,那么这个值将被返回。

二、focus & blur
html 页面中,诸如按钮、文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作。同样整个页面也有所谓的焦点,它就挂载在 document 元素下。
注意:该方法有个缺陷,就是首次进入页面必须点击一次让元素获取焦点,然后响应事件才能生效。
document.onfocus 和 document.onblur 用来弥补 visibilitychange 事件不能监听到页面被部分遮挡的情况。

刚才的情况就可以用js实现:
  1. // 浏览器标题切换   
  2. var OriginTitile = document.title;    // 保存之前页面标题   
  3. var titleTime;   
  4. document.addEventListener('visibilitychange'function(){   
  5.     if (document.hidden){   
  6.         document.title = '**社區主論壇 - 1024';   
  7.         clearTimeout(titleTime);   
  8.     }else{   
  9.         document.title = '生命-1s ~ ';   
  10.         titleTime = setTimeout(function() {   
  11.             document.title = OriginTitile;   
  12.         }, 2000); // 2秒后恢复原标题   
  13.     }   
  14. }); 




¥ 打赏
×
如果您觉得文章帮助了您就打赏一下吧
非常感谢你的打赏,我们将继续分享更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

本文《js监听浏览器当前页面的显示与隐藏》发布于石头博客文章,作者:admin,如若转载,请注明出处:https://www.pweb123.com/html/JavaScript/929.html,否则禁止转载,谢谢配合!
下一篇:最后一页

文章点评

我来说两句 已有0条评论
点击图片更换
小程序插件

PHPcms小程序插件

phpcms小程序插件万能接口,支持一键授权登录

Pbootcms小程序插件

Pbootcms小程序插件,支持一键授权登录

迅睿cms小程序插件

xunruicms小程序插件,简单易学,专为小白设计

dedecms小程序插件

不需要php基础,只需要div+css就可,方便简单

添加微信好友

添加微信好友

微信小程序

百度小程序