关于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
1. 随笔为作者自己经验以及学习的总结;
2. 如本文对您有帮助请移步右下角,推荐本文,先谢谢各位看官,因为您的支持是我最大动力;
3. 欢迎大家转载本文;
2. 如本文对您有帮助请移步右下角,推荐本文,先谢谢各位看官,因为您的支持是我最大动力;
3. 欢迎大家转载本文;
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步