浏览器visibilitychange事件

浏览器visibilitychange事件1.项目中,从一个页面进入到另一个页面,然后在这个页面做一些修改后返回到第一个页面,这个时候第一个页面没有刷新只类似tab切换,所以用户的修改未生效。使用html的浏览器事件visibilitychange2.此事件已经得到了广泛应用,但是一些老版本的浏览器需要加相应的前缀3.微信内置的浏览器因为没有标签,所以不会触发该事件手机端直接按Home键回到桌面,也不会触发该事…

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

1. 项目中,从一个页面进入到另一个页面,然后在这个页面做一些修改后返回到第一个页面,这个时候第一个页面没有刷新只类似tab切换,所以用户的修改未生效。使用html的浏览器事件 visibilitychange 

2. 此事件已经得到了广泛应用,但是一些老版本的浏览器需要加相应的前缀

3. 微信内置的浏览器因为没有标签,所以不会触发该事件 
    手机端直接按Home键回到桌面,也不会触发该事件
    PC端浏览器失去焦点也不会触发该事件,但是最小化回到桌面会触发

4. 定义有两个只读的document属性: hidden和visibilityStat
    
document.hidden是一个布尔值,简单的表示标签页显示或者隐藏(隐藏包括页面在后台标签页中或者浏览器最小化,但是不包括被其他软件比如打开的sublime遮盖)
    document.visibilityState属性更详细,有四个值
           =》visible: 页面在前台标签中
           =》hidden: 页面在后台标签页或者浏览器最小化
           =》uploaded: 页面正在从内存中卸载
           =》prerender: 页面在屏幕外执行预渲染处理,document.hidden的值为true

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];
}
var visProp = getHiddenProp();
if (visProp) {
    var evtname = visProp.replace(/[H|h]idden/, '') + 'visibilitychange';
    document.addEventListener(evtname, function () {
        document.title = document[getVisibilityState()]+"状态";
    },false);
}

 

转载于:https://www.cnblogs.com/lindsayzhao103011/p/8884418.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/148461.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 【实例分割】1、SOLOv1: Segmenting Objects by Locations_2019[通俗易懂]

    【实例分割】1、SOLOv1: Segmenting Objects by Locations_2019[通俗易懂]文章目录一、背景二、本文方法三、本文方法的具体做法3.1问题定义3.1.1Semanticcategory3.1.2InstanceMask3.2NetworkArchitecture3.3SOLOlearning3.3.1LabelAssignment3.3.2LossFunction3.4Inference四、实验4.1主要结果4.2HowSOLOwork……

  • object对象转换成map_object强转成map

    object对象转换成map_object强转成map1、Object转换成map的方法importjava.lang.reflect.Field;importjava.util.HashMap;importjava.util.Map;/***将Object对象里面的属性和值转化成Map对象**@paramobj*@return*@throwsIllegalAccessException*/publicstaticMap<String,

  • PL/SQL Developer使用技巧

    PL/SQL Developer使用技巧

  • 打印纸张尺寸换算_纸张尺寸对照表

    打印纸张尺寸换算_纸张尺寸对照表常用纸张的尺寸大小对照表-纸张规格对照表纸张的大小国际标准化组织的ISO216国际标准指明了大多数国家使用的标准纸张的尺寸。此标准源自德国,在1922年通过,定义了A、B、C三组纸张尺寸,C组纸张尺寸主要用于信封。另外,有些国家也有自己的标准,如美国,日本。这里主要是指办公用纸。下面是一些标准纸张的具体尺寸。单位:mmISO216AA0A1A2A3A4A5A…

  • 【c语言】小游戏程序——弹跳小球

    现在说一下其中一个最简单的小程序:弹跳小球———————————————LINE————————————————首先我们知道,在窗口的坐标系原点是在窗口左上角的,如图所示然后我们如果想在这个坐标系里面的某个点上画出一个小球,那么它的坐标系应该就是这样的转换到c语言的思维的话:X0既是打印…

  • Python格式化字符串f-string概览

    Python格式化字符串f-string概览简介f-string,亦称为格式化字符串常量(formattedstringliterals),是Python3.6新引入的一种字符串格式化方法,该方法源于PEP498–LiteralStringInterpolation,主要目的是使格式化字符串的操作更加简便。f-string在形式上是以f或F修饰符引领的字符串(f’xxx’或F’xxx’),以大括号对{}标明…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号