监听浏览器tab切换
监听浏览器切屏
为了完成验证用户在切换浏览器tab时进行登录再次认证需求需要监听浏览器切换窗口
if (document.hidden !== undefined) {
document.addEventListener('visibilitychange', () => {
console.log(document.hidden, document.visibilityState)
})
}
- visibilitychange 是h5的一个事件(IE9不支持),可以通过这个事件来暂停css3动画、暂停音乐等;
- document.hidden的值为:true、false;
- document.visibilityState的值为:
- hidden(当浏览器最小化、切换tab、电脑锁屏时)
- visible(用户正在查看当前页面时)
- prerender(文档加载离屏或者不可见
- unloaded(当文档将要被unload时)
function getHiddenProp()
{
var prefixes = ['webkit','moz','ms','o'];
// if 'hidden' is natively supported just return it
if ('hidden' in document) return 'hidden';
// otherwise loop over all the known prefixes until we find one
for (var i = 0; i < prefixes.length; i++)
{
if ((prefixes[i] + 'Hidden') in document)
return prefixes[i] + 'Hidden';
}
// otherwise it's not supported
return null;
}
function getVisibilityState()
{
var prefixes = ['webkit', 'moz', 'ms', 'o'];
if ('visibilityState' in document) return 'visibilityState';
for (var i = 0; i < prefixes.length; i++)
{
if ((prefixes[i] + 'VisibilityState') in document)
return prefixes[i] + 'VisibilityState';
}
// otherwise it's not supported
return null;
}
function isHidden()
{
var prop = getHiddenProp();
if (!prop) return false;
return document[prop];
}
// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp)
{
var evtname = visProp.replace(/[H|h]idden/, '') + 'visibilitychange';
document.addEventListener(evtname, function ()
{
document.title = document[getVisibilityState()]+"状态";
}, false);
监听浏览器tab切换的更多相关文章
- js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 ——IT唐伯虎 摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventLis ...
- 监听浏览器tab选项卡选中事件,点击浏览器tab标签页回调事件,浏览器tab切换监听事件
js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...
- 【hugo】- hugo 监听浏览器切换title
hugo 博客 监听浏览器title 动态改变浏览器title标题 找到head.html themes/maupassant/layouts/partials/head.html 添加监听js 可以 ...
- JS实时监听浏览器宽度的变化
boot:function(){ //加载页面时执行一次 changeMargin(); //监听浏览器宽度的改变 window.onresize = function(){ changeMargin ...
- vue监听浏览器窗口大小变化
首先,页面初始化mounted的时候,通过 document.body.clientWidth 和 document.body.clientHeight 来获取到浏览器的宽和高,然后通过 window ...
- Android-Activity横竖屏切换不杀死Activity 并监听横竖屏切换
在上一篇博客,Android-Activity临时数据的保存,中讲解到,当发生横竖屏切换的时候,系统会杀死Activity并重新启动Activity 系统会杀死Activity 12-12 08:11 ...
- vue JS实现监听浏览器返回按键事件
// 这个是监听浏览器回退键的returnButton () { let vm = this; $(document).ready(function () { if (window.history & ...
- JS监听浏览器标签页的显示与隐藏
/** * 监听浏览器标签页的显示与隐藏 */ class ListenerPageVisibility { constructor () { // 设置隐藏属性和改变可见属性的事件的名称 this. ...
- JS 监听浏览器各个标签间的切换
以前看到过一些网页,在标签切换到其它地址时,网页上的标题上会发生变化,一直不知道这个是怎么做的,最近查了一些资料才发现有一个 visibilitychange 事件就可以搞定,这里将介绍一下页面可见性 ...
随机推荐
- 短短 29 天,应对高峰 100W+ 访问,看浙大如何交出满分答卷
疫情期间"停课不停教,停课不停学",线上开课第一天,浙江大学网上开课平台访问量即突破100 万次,访客数3万余人,最高峰达 1.1万人同时在线,发起课程直播2000余场,然而系统却 ...
- 【Deeplearning.ai 】吴恩达深度学习笔记及课后作业目录
吴恩达深度学习课程的课堂笔记以及课后作业 代码下载:https://github.com/douzujun/Deep-Learning-Coursera 吴恩达推荐笔记:https://mp.weix ...
- ScatterLayout分散布局在kv中的引用
from kivy.uix.scatterlayout import ScatterLayout from kivy.app import App class ScatterLayoutWidget( ...
- 如何接入 K8s 持久化存储?K8s CSI 实现机制浅析
作者 王成,腾讯云研发工程师,Kubernetes contributor,从事数据库产品容器化.资源管控等工作,关注 Kubernetes.Go.云原生领域. 概述 进入 K8s 的世界,会发现有很 ...
- Java:内部类小记
Java:内部类小记 对 Java 中的 内部类,做一个微不足道的小小小小记 首先:内部类是指在一个外部类的内部再定义一个类.内部类作为外部类的一个成员,并且依附于外部类而存在的. 成员内部类 成员内 ...
- Java:判断是否相等小记
Java:判断是否相等小结 对 Java 中的判断是否相等,即判断两数/两对象是否相等,做一个微不足道的小小小小记 == 判断 对于基本类型和引用类型 == 的效果是不同的,如下: 基本类型:比较的值 ...
- 2021.9.13考试总结[NOIP模拟52]
T1 路径 考虑每一位的贡献,第$i$位每$2^i$个数会变一次,那么答案为$\sum_{i=1}^{log_2n} \frac{n}{2^i}$. $code:$ 1 #include<bit ...
- Python课程笔记(六)
今天上课补上了上次未学完比较重点的鼠标和键盘事件,同时开始学习运用turtle进行绘图. 本次课程的代码: https://gitee.com/wang_ming_er/python_course_l ...
- 【做题记录】 [HEOI2013]SAO
P4099 [HEOI2013]SAO 类型:树形 \(\text{DP}\) 这里主要补充一下 \(O(n^3)\) 的 \(\text{DP}\) 优化的过程,基础转移方程推导可以参考其他巨佬的博 ...
- 算法:数字推盘游戏--重排九宫(8-puzzle)
一.数字推盘游戏 数字推盘游戏(n-puzzle)是一种最早的滑块类游戏,常见的类型有十五数字推盘游戏和八数字推盘游戏等.也有以图画代替数字的推盘游戏.可能Noyes Palmer Chapman在1 ...