HTML5实现页面切换激活的PageVisibility API使用初探

2020-04-22 06:44:57易采站长站整理

JavaScript Code复制内容到剪贴板

function browerKernel(){   
    
    var result;   
    
    [‘webkit’, ‘moz’, ‘o’, ‘ms’].forEach(function(prefix){   
    
        if( typeof document[ prefix + ‘Hidden’ ] != ‘undefined’ ){   
            result = prefix;   
        }   
    });   
    
    return result;   
    
}   
    
function init(){   
    
    prefix = browerKernel();   
    
    var showTip = document.getElementById(‘showTip’);   
    
    document.addEventListener( prefix  + ‘visibilitychange’, function onVisibilityChange(e){   
    
        var tip = null;   
                
        if( document[ prefix + ‘VisibilityState’ ] == ‘hidden’ ) tip = ‘<p>离开页面</p>’;   
        else if( document[ prefix + ‘VisibilityState’ ]  == ‘visible’ ) tip = ‘<p>进入页面</p>’;   
    
        showTip.innerHTML = showTip.innerHTML + tip;   
    });   
}   
    
window.onload = init();   
  

再再来看一个具体的例子,

JavaScript Code复制内容到剪贴板

<!DOCTYPE HTML>       
<html>       
<head>       
     <script type="text/javascript">       
          timer = 0;       
          function onLoad(){