浏览器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)


相关推荐

  • UDP协议开发

    UDP协议开发1简介在进行电网插件开发的过程中,对电网接入程序进行了开发,使得在综合安防管理平台上能够非常方便的接入天地维正电网设备。电网数据采用UDP协议,通过监狱局域网,向用户指定的5个IP地址的某端口,同时发送,各IP地址收到的数据相同。因为是第一次使用网络数据报进行开发,因此遇到了许多的坑。在这里把遇到的问题组织成一个文档,重新理解在代码撰写过程中遇到的问题。本文档适用于初次使用UDP进行…

  • go基于grpc构建微服务框架-结构化日志输出

    go基于grpc构建微服务框架-结构化日志输出

  • DHCP中继代理_三层交换机配置dhcp中继

    DHCP中继代理_三层交换机配置dhcp中继实验目的:1.无中继代理时,DHCP向客户端发送地址段和接收接口地址相同的网段,如果不存在相同网段,就会丢弃请求数据包.2.有中继代理时,服务器能够发送正确IP地址给客户端,是因为有一个被称为option82的选项,这个选项只要DHCP请求数据包被中继后便会自动添加,此选项,中继路由器会在里面的giaddr位置写上参数,这个参数,就是告诉服务器,客户端需要哪个网段的IP地址才能正常工作。…

    2022年10月15日
  • android线程间通信的几种方法_Android线程间通信机制

    android线程间通信的几种方法_Android线程间通信机制讲解Handler机制的博文很多,我也看了很多,但说实话,在我对Handler几乎不怎么了解的情况下,每一篇文章我都没太看懂,看完之后脑子里还是充满了疑问。究其原因,是因为几乎每一篇文章一上来就开始深入Handler源码,使得在一些宏观的问题上还是充满疑问,如果你从来没接触过Handler,对一些基础的问题还充满疑问,那深入源码去探究根源肯定会有些吃力。下面,我就从一个初学者思考的角度,来讲一讲H…

  • lambda python表达式_Python的条件表达式和lambda表达式实例

    lambda python表达式_Python的条件表达式和lambda表达式实例条件表达式条件表达式也称为三元表达式,表达式的形式:xifCelsey。流程是:如果C为真,那么执行x,否则执行y。经过测试x,y,C可以是函数,表达式,常量等等;defput():print(‘thisisput()’)defget():print(‘thisisget()’)defpost():return0method=putifpost()elseget…

    2022年10月17日
  • navicat premium 激活码_最新在线免费激活

    (navicat premium 激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

发表回复

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

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