关于HTML面试题汇总之visibility

一、页面可见性(visibility)

主要提供两个属性,一个事件(都在document对象上): 1. 属性:    1.1.  hidden:获取或设置当前页面的可见性,boolean值;    1.2. visibilityState: 获取当前页面可见性状态,值为hidden、visibility其中一个 2. 事件:visibilityChange:页面可见性发生改变时触发的事件

3. 由于各类浏览器的支持情况不一致,都需要加上私有属性的前缀,如 webkit、moz、ms、o等。在ie9-不支持。

3. 可见性的应用场景:   3.1. 视频播放的切换   3.2. 用户状态的验证

二、代码示例:

2.1. Utils类,提供page visibility的检测能力,主要实现兼容各种浏览器的能力:

const BROWER_PREFIX = ['webkit','moz','ms','o',''];
class Utils{
    constructor(){
      this.isPageVisibilitySupport = false;
      this.prefix = '';
    }
    /**
     * 获取驼峰命名格式的属性名
     * @param prefix {string} 前缀
     * @param value {string} 属性名
    */
    prefixToCamel( prefix, value){
      if(prefix){
        return prefix + value.slice(0,1).toUpperCase() + value.slice(1);
      }
      return value;
    }
    calculatePageVisibilitySupport(){
        var that = this;
        BROWER_PREFIX.forEach(function (data) {
          if(!that.isPageVisibilitySupport && document[that.prefixToCamel(data,'hidden')] != undefined ){
            that.isPageVisibilitySupport = true;
            that.prefix = data;
          }
        });
        return that.isPageVisibilitySupport;
    }
    isHidden(){
        if(this.calculatePageVisibilitySupport()){
            return document[this.prefixToCamel(this.prefix,'hidden')];
        }
        return undefined;
    }
    visibilityState(){
        if(this.calculatePageVisibilitySupport()){
            return document[this.prefixToCamel(this.prefix,"visibilitystate")];
        }
        return undefined;
    }
} 
export default Utils;

2.2. core类,提供外部可访问的静态方法和属性:

import utils from 'src/utils';
var _utils = new utils();
class Core {
    static visibilityChange(callback){
        if( _utils.calculatePageVisibilitySupport() && typeof callback == 'function'){
            return document.addEventListener(Core.prefix + 'visibilitychange',function(event){
                this.hidden = Core.hidden;
                this.visibilityState = Core.visibilityState;
                callback.call(this,event);
            });
            return undefined;
        }
    }
}
Core.hidden = _utils.isHidden();
Core.visibilityState = _utils.visibilityState();
export default Core;

visibilityChange方法:实现page visibility值改变时触事件绑定。

三、源码GIT地址

此包通过karma框架 + jasmine进行单元测试。源码通过babel

git@code.csdn.net:cqhaibin/visibilityproject.git

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据钻研

如何优雅地使用Sublime Text3

Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受。相比...

2.1K60
来自专栏草根专栏

使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular

完成client.service.ts: import { Injectable } from '@angular/core'; import { Http, ...

53450
来自专栏Pythonista

Golang之Mysql事务

39320
来自专栏Golang语言社区

【Go 语言社区】golang的bufio用于内容解析

golang提供了io.Reader,也就是读内容,可以从很多地方读,譬如: // from string.var r io.Reader = strings....

40270
来自专栏Vamei实验室

Python应用03 使用PyQT制作视频播放器

作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁任何形式转载。

23830
来自专栏娱乐心理测试

微信小程序 加载 HTML 标签

最近写项目中遇到一个问题,后台接口返回数据时有html标签,小程序如何加载html标签格式的字符串呢?小程序有跳转外连接的功能可以直接跳转到一个h5页面。具体使...

37330
来自专栏Youngxj

PHP setcookie无效的原因分析

27550
来自专栏iOS开发攻城狮的集散地

iOS app国际化 、跳转到系统设置、iOS10通知、正则表达式

17440
来自专栏calvin

Quill编辑器介绍及扩展

从这里进入官网. 能找到这个NB的编辑器是因为公司项目需要一个可视化的cms编辑器,类似微信公众号编辑文章。可以插入各种卡片,模块,问题,图片等等。然后插入的内...

60520
来自专栏冷冷

AngularJS 中使用Swiper制作滚动图不能滑动

Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,受到很多前端开发者的欢迎。 ---- 今天在使用Swiper的时候遇到这个问题: 使用an...

32850

扫码关注云+社区

领取腾讯云代金券