浏览器页面可见性事件

发布时间 2023-12-11 17:23:03作者: DreamerSix

       当我们页面在做耗资源的操作时(例如websockert 通讯,音频、视频播放灯),彼时切换到其他页面,耗资源的操作还在继续,但我们已经看不到最直观的效果反馈了,又浪费了服务器资源,有没有办法在页面切换到其它页面时让其暂停耗资源的操作呢,让服务器的资源能够最大化的有效利用?

浏览器页面可见性事件主要借助一个HTML5的一个API visibilitychange

function getAvailableVisiablityPrfix(){
    var prefixs=['webkit','moz','ms','o'];

    if('hidden' in document)
        return '';

    for(var i=0;i<prefixs.length;i++){
        var prefix=prefixs[i];
        if((prefix+'hidden') in document){
            return prefix;
        }
    }

    //未识别到指定的结果,兜底返回
    return 'not found';
}

/**
 * 注册页面可见性事件
 * @param {function} hook 页面可见性回调函数
 * @returns 
 */
function registerPageVisibilityEvent(hook){
    var prefix=getAvailableVisiablityPrfix();

    if(prefix==='not found'){
        if(window.console)
        {
            console.error('your browser is not support visibilitychange event');
        }
        else
        {
            alert('your browser is not support visibilitychange event');
        }
        return;    
    }
        
    var hiddenName=prefix+'hidden',
        eventName=prefix+ 'visibilitychange',
        stateName=prefix+ 'visibilityState';

    //注册监听事件    
    document.addEventListener(
    eventName
    , function () {
        var visibilityState=document[stateName], hidden=document[hiddenName];
        hook && hook({visibilityState:visibilityState,hidden:hidden});
    }
    ,false);
}