监听浏览器切屏

为了完成验证用户在切换浏览器tab时进行登录再次认证需求需要监听浏览器切换窗口

 if (document.hidden !== undefined) {
document.addEventListener('visibilitychange', () => {
console.log(document.hidden, document.visibilityState)
})
}
  • visibilitychange 是h5的一个事件(IE9不支持),可以通过这个事件来暂停css3动画、暂停音乐等;
  • document.hidden的值为:true、false;
  • document.visibilityState的值为:
    1. hidden(当浏览器最小化、切换tab、电脑锁屏时)
    2. visible(用户正在查看当前页面时)
    3. prerender(文档加载离屏或者不可见
    4. 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切换的更多相关文章

  1. js监听浏览器tab窗口切换

    js监听浏览器tab窗口切换 ——IT唐伯虎 摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) {  document.addEventLis ...

  2. 监听浏览器tab选项卡选中事件,点击浏览器tab标签页回调事件,浏览器tab切换监听事件

    js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...

  3. 【hugo】- hugo 监听浏览器切换title

    hugo 博客 监听浏览器title 动态改变浏览器title标题 找到head.html themes/maupassant/layouts/partials/head.html 添加监听js 可以 ...

  4. JS实时监听浏览器宽度的变化

    boot:function(){ //加载页面时执行一次 changeMargin(); //监听浏览器宽度的改变 window.onresize = function(){ changeMargin ...

  5. vue监听浏览器窗口大小变化

    首先,页面初始化mounted的时候,通过 document.body.clientWidth 和 document.body.clientHeight 来获取到浏览器的宽和高,然后通过 window ...

  6. Android-Activity横竖屏切换不杀死Activity 并监听横竖屏切换

    在上一篇博客,Android-Activity临时数据的保存,中讲解到,当发生横竖屏切换的时候,系统会杀死Activity并重新启动Activity 系统会杀死Activity 12-12 08:11 ...

  7. vue JS实现监听浏览器返回按键事件

    // 这个是监听浏览器回退键的returnButton () { let vm = this; $(document).ready(function () { if (window.history & ...

  8. JS监听浏览器标签页的显示与隐藏

    /** * 监听浏览器标签页的显示与隐藏 */ class ListenerPageVisibility { constructor () { // 设置隐藏属性和改变可见属性的事件的名称 this. ...

  9. JS 监听浏览器各个标签间的切换

    以前看到过一些网页,在标签切换到其它地址时,网页上的标题上会发生变化,一直不知道这个是怎么做的,最近查了一些资料才发现有一个 visibilitychange 事件就可以搞定,这里将介绍一下页面可见性 ...

随机推荐

  1. 短短 29 天,应对高峰 100W+ 访问,看浙大如何交出满分答卷

    疫情期间"停课不停教,停课不停学",线上开课第一天,浙江大学网上开课平台访问量即突破100 万次,访客数3万余人,最高峰达 1.1万人同时在线,发起课程直播2000余场,然而系统却 ...

  2. 【Deeplearning.ai 】吴恩达深度学习笔记及课后作业目录

    吴恩达深度学习课程的课堂笔记以及课后作业 代码下载:https://github.com/douzujun/Deep-Learning-Coursera 吴恩达推荐笔记:https://mp.weix ...

  3. ScatterLayout分散布局在kv中的引用

    from kivy.uix.scatterlayout import ScatterLayout from kivy.app import App class ScatterLayoutWidget( ...

  4. 如何接入 K8s 持久化存储?K8s CSI 实现机制浅析

    作者 王成,腾讯云研发工程师,Kubernetes contributor,从事数据库产品容器化.资源管控等工作,关注 Kubernetes.Go.云原生领域. 概述 进入 K8s 的世界,会发现有很 ...

  5. Java:内部类小记

    Java:内部类小记 对 Java 中的 内部类,做一个微不足道的小小小小记 首先:内部类是指在一个外部类的内部再定义一个类.内部类作为外部类的一个成员,并且依附于外部类而存在的. 成员内部类 成员内 ...

  6. Java:判断是否相等小记

    Java:判断是否相等小结 对 Java 中的判断是否相等,即判断两数/两对象是否相等,做一个微不足道的小小小小记 == 判断 对于基本类型和引用类型 == 的效果是不同的,如下: 基本类型:比较的值 ...

  7. 2021.9.13考试总结[NOIP模拟52]

    T1 路径 考虑每一位的贡献,第$i$位每$2^i$个数会变一次,那么答案为$\sum_{i=1}^{log_2n} \frac{n}{2^i}$. $code:$ 1 #include<bit ...

  8. Python课程笔记(六)

    今天上课补上了上次未学完比较重点的鼠标和键盘事件,同时开始学习运用turtle进行绘图. 本次课程的代码: https://gitee.com/wang_ming_er/python_course_l ...

  9. 【做题记录】 [HEOI2013]SAO

    P4099 [HEOI2013]SAO 类型:树形 \(\text{DP}\) 这里主要补充一下 \(O(n^3)\) 的 \(\text{DP}\) 优化的过程,基础转移方程推导可以参考其他巨佬的博 ...

  10. 算法:数字推盘游戏--重排九宫(8-puzzle)

    一.数字推盘游戏 数字推盘游戏(n-puzzle)是一种最早的滑块类游戏,常见的类型有十五数字推盘游戏和八数字推盘游戏等.也有以图画代替数字的推盘游戏.可能Noyes Palmer Chapman在1 ...