判斷當前頁面是否是用戶正在瀏覽的頁面

經過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);
相關文章
相關標籤/搜索