监听浏览器切屏

为了完成验证用户在切换浏览器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. '\r'(回车符),'\n'(换行符)与"\r\n"

    一.'\n','\r'和"\r\n" 回车\r本义是光标重新回到本行开头,r的英文return,控制字符可以写成CR,即Carriage Return(回车,carriage有&q ...

  2. JVM:GC Roots

    JVM:GC Roots 本笔记是根据bilibili上 尚硅谷 的课程 Java大厂面试题第二季 而做的笔记 JVM 垃圾回收的时候如何确定垃圾 什么是垃圾 简单来说就是内存中已经不再被使用的空间就 ...

  3. 将manjaro作为主力开发系统,我遇到了哪些坑。

    首先遇到的问题就是企业微信. 最开始几天,我直接去安装企业微信和微信,安装全都报错了. 无奈之下,只好安装了virtual box,装了一个win7,可以正常使用微信,企业微信,最开始蛋疼的地方是,企 ...

  4. stm32f103系列引脚定义-功能图

    器件功能和配置(STM32F103xx增强型) STM32F103xx增强型模块框架图 STM32F103xx增强型VFQFPN36管脚图 STM32F103xx增强型LQFP100管脚图 STM32 ...

  5. 基于Vue的工作流项目模块中,使用动态组件的方式统一呈现不同表单数据的处理方式

    在基于Vue的工作流项目模块中,我们在查看表单明细的时候,需要包含公用表单信息,特定表单信息两部分内容.前者表单数据可以统一呈现,而后者则是不同业务的表单数据不同.为了实现更好的维护性,把它们分开作为 ...

  6. 攻防世界 杂项 10.2017_Dating_in_Singapore

    题目描述: 01081522291516170310172431-050607132027262728-0102030209162330-02091623020310090910172423-0201 ...

  7. 因为一个小小的Integer问题导致阿里一面没过,遗憾!

    面试题:new Integer(112)和Integer.valueOf(112)的区别 面试官考察点猜想 这道题,考察的是对Integer这个对象原理的理解,关于这道题的变体有很多,我们会一一进行分 ...

  8. hdu 2189 来生一起走(DP)

    题意: 有N个志愿者.指挥部需要将他们分成若干组,但要求每个组的人数必须为素数.问不同的方案总共有多少.(N个志愿者无差别,即每个组的惟一标识是:人数) 思路: 假设N个人可分为K组,将这K组的人数从 ...

  9. hdu 2147 kiki's game(DP(SG)打表找规律)

    题意: n*m的棋盘,一枚硬币右上角,每人每次可将硬币移向三个方向之一(一格单位):左边,下边,左下边. 无法移动硬币的人负. 给出n和m,问,先手胜还是后手胜. 数据范围: n, m (0<n ...

  10. 数字孪生 3D 科技馆的科学传播新模式

    前言 科技馆是一种参与型体验型的博物馆,以传播科学知识.培养公众的科学创新技术为宗旨,并以其生动的展现方式得到公众的广泛欢迎.一直以来,我国科技馆的发展受到各种因素的制约和影响,发展缓慢.如今在我国经 ...