一、頁面可見性(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