Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Web Visibilitychange

Web Visibilitychange

作者头像
全栈程序员站长
发布于 2022-09-07 08:39:15
发布于 2022-09-07 08:39:15
15900
代码可运行
举报
运行总次数:0
代码可运行

大家好,又见面了,我是你们的朋友全栈君。

visibilitychange

  • 浏览器标签页被隐藏或显示的时候会触发visibilitychange事件.
    • visible : 当前页面可见. 即此页面在前景标签页中,并且窗口没有最小化.
    • hidden: 页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态,或者操作系统正处于 ‘锁屏状态’ .
    • prerender : 页面此时正在渲染中, 因此是不可见的. 文档只能从此状态开始,永远不能从其他值变为此状态.注意: 浏览器支持是可选的.
    • unloaded : 页面从内存中卸载清除. 注意: 浏览器支持是可选的.
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
document.addEventListener("visibilitychange", function() {
  if(document.visibilityState === "visible"){
    console.log(“hello,显示咯")
  }
  if(document.visibilityState === "hidden"){
    console.log("离开当前页")
  }
});

https://serious-lose.notion.site/Web-Visibilitychange-496d9051bda741e19fc0890913b3565e

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/148684.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
document.visibilityState 监听浏览器最小化,tab标签栏之间的切换状态
本文为joshua317原创文章,转载请注明:转载自joshua317博客 https://www.joshua317.com/article/52
joshua317
2021/08/31
1.7K0
妙趣横生的HTML5 Page Visibility API
最近浏览36kr 的网页的时候偶然发现一个有趣的情况:当浏览器Tab 处于非当前页的时候,36kr 的标题栏会自动换成可爱的大白字符形象。Jeff 在第一次看到的时候就知道这种效果是通过HTML5 的
Jeff
2018/01/22
9680
妙趣横生的HTML5 Page Visibility API
Page Visibility API 教程
但是,这些事件在手机上可能不会触发,页面就直接关闭了。因为手机系统可以将一个进程直接转入后台,然后杀死。
ruanyf
2018/11/22
6680
当前页面是否可见
Document.hidden属性来自于浏览器Page Visibility API。
公众号@魔术师卡颂
2020/08/26
2.1K0
浏览器visibilitychange事件
1. 项目中,从一个页面进入到另一个页面,然后在这个页面做一些修改后返回到第一个页面,这个时候第一个页面没有刷新只类似tab切换,所以用户的修改未生效。使用html的浏览器事件 visibilitychange
全栈程序员站长
2022/09/07
8400
JavaScript 页面可见性 Page Visibility API 监听用户离开页面
Page Visibility API 用来检测页面当前是否可见,以及打开网页的时间等
Leophen
2020/10/28
2.8K0
关于直播卖货系统平台在微信浏览器中音视频播放的问题
Android 上,因为各个软件使用的浏览器渲染引擎不一样,所以直播卖货系统页面播放的效果差异也很大,这里主要以微信为主。微信使用的是腾讯浏览器自带的X5内核。
云豹kj的晨曦
2020/09/17
1.3K0
关于直播卖货系统平台在微信浏览器中音视频播放的问题
那些关于DOM的常见Hook封装(二)
本文是深入浅出 ahooks 源码系列文章的第十五篇,这个系列的目标主要有以下几点:
GopalFeng
2022/08/01
9270
浏览器标签tab窗口切换时事件状态侦听
项目中使用到了websocket,用户在浏览器窗口切换或者浏览器最下话后,websocket的状态有可能断开,且没有重试机制,所以想通过用户回到当前页面的时候,系统能够自动刷新,重新连接socket
joshua317
2021/08/31
2.5K0
你不知道的JavaScript APIs
这是一个鲜为人知的 web API,在JS现状调查[1]中,它的认知度排名倒数第四。它可以让你知道用户何时离开了页面。准确地说,只要页面的可见性状态发生变化,无论是用户最小化、最大化窗口还是切换标签页,该API都会触发一个事件。
chuckQu
2022/11/28
1K0
你不知道的JavaScript APIs
JavaScript 页面可见性-监听用户离开页面-visibilitychange 事件
用户9857551
2023/10/17
1.5K0
【JS】1676- 重学 JavaScript API - Page Visibility API
本文将介绍 Page Visibility API 的概念、使用方法、兼容性和实际应用案例。
pingan8787
2023/09/01
2510
【JS】1676- 重学 JavaScript API - Page Visibility API
你不知道的JavaScript APIs
这个APi 可以让我们知道用户何时离开了页面。准确地说,只要页面的可见性状态发生变化,无论是用户最小化、最大化窗口还是切换标签,该API都会触发一个事件 visibilitychange 。
前端小智@大迁世界
2022/10/28
8240
没了解过的Web API
getBattery getBattery方法提供了系统的电量信息,返回一个promise对象 navigator.getBattery().then(res => { console.log(res) /** 四个属性 charging 是否在充电 chargingTime 充满电所需时间 dischargingTime 当前电量可使用时间 level 剩余电量 */ /** 添加事件 onchargingchange 监听充电状态改变
peng_tianyu
2022/12/15
5280
没了解过的Web API
js判断用户进入和离开当前页面
VisibilityChange 事件;用于判断用户是否离开当前页面 // 页面的 visibility 属性可能返回三种状态 // prerender,visible 和 hidden let pageVisibility = document.visibilityState; // 监听 visibility change 事件 document.addEventListener('visibilitychange', function() { // 页面变为不可见时触发 if (do
河湾欢儿
2018/09/13
6.5K0
几个神奇的Web Api,你(可能)不知道~
作为前端er,我们的工作与web是分不开的,随着HTML5的日益壮大,浏览器自带的webapi也随着增多。本篇文章主要选取了几个有趣且有用的webapi进行介绍,分别介绍其用法、用处以及浏览器支持度,同时我也分别为这几个api都做了一个简单的demo(https://github.com/1921622004/webapi) (真的很简单,样式等于没有~)这几个api分别是:
苏南
2020/12/16
5820
几个神奇的Web Api,你(可能)不知道~
注意,这个 JavaScript 事件即将弃用!
通常情况,在 HTML 文档即将被卸载时,unload 事件将会调用。理论上,它可用来在用户离开页面时运行一些代码,或者作为会话回调结束时运行代码。
ConardLi
2023/08/23
5250
注意,这个 JavaScript 事件即将弃用!
前端踩坑系列《五》
不知不觉这个系列已经更新到了第五篇,我尽量将每周遇到的问题和大家一起分享。这里谈到了分享,那就不仅仅是个人的事情,我觉得大家都可以一起参与进来。之所以想写这个系列,本身就是想提升自我解决问题的能力,慢慢地也培养一种记录问题的习惯,我也希望大家能够一起完成!
GopalFeng
2020/09/24
3980
前端踩坑系列《五》
离开和进入html页面时改变title
离开和进入页面时改变网页标题,最近也才刚刚开始js学习,下面这段代码简单就是说访客如果离开你的网站之后,站点标题会发生变化。原理是使用了HTML5的Page Visibility API 目前页面可见性API有两个属性,一个事件:
qiangzai
2021/12/21
2.1K0
离开和进入html页面时改变title
HTML5的这些api你知道吗?
摘要总结:本文主要介绍了移动端Web开发中一些常用的API,包括DeviceMotionEvent、DeviceOrientationEvent、Gyroscope、Compass、GPS、MediaStream和MediaRecorder,以及这些API在移动应用程序开发中的实际应用和注意事项。
IMWeb前端团队
2017/12/29
1.4K0
相关推荐
document.visibilityState 监听浏览器最小化,tab标签栏之间的切换状态
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验