經過visibilitychange事件來判斷頁面可見性的狀態,經過document.hidden來判斷當前頁面是否在瀏覽html
// 各類瀏覽器兼容 var hidden, visibilityChange; if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; } else if (typeof document.mozHidden !== "undefined") { hidden = "mozHidden"; visibilityChange = "mozvisibilitychange"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; } // 添加監聽器,在title裏顯示狀態變化 document.addEventListener(visibilityChange, function() { if(document[hidden]){ // 用戶沒有瀏覽當前頁面 }else{ // 用戶正在瀏覽當前頁面 } }, false);
或者web
var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null; var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange'); var onVisibilityChange = function(){ if (!document[hiddenProperty]) { console.log('頁面非激活'); }else{ console.log('頁面激活') } } document.addEventListener(visibilityChangeEvent, onVisibilityChange);