zoukankan      html  css  js  c++  java
  • 浏览器visibilitychange事件

    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);
    }
  • 相关阅读:
    webstorm 2017 激活破解 最新 2018
    phpexcel 导出xsl乱码
    微信小程序的z-index在苹果ios无效
    onenote架设在局域网服务器
    .gitignore忽略多层文件夹用**
    phpstorm 使用xdebug断点
    Phpstudy 无法启动mysql
    git使用kdiff3合并乱码问题
    小程序回退刷新操作
    Navicat 连接远程服务器mysql 长时间不操作会连接很久
  • 原文地址:https://www.cnblogs.com/lindsayzhao103011/p/8884418.html
Copyright © 2011-2022 走看看