js 判斷 是否在當前頁面 當前頁面是否在前端

 

1.使用visibilitychange

瀏覽器標簽頁被隱藏或顯示的時候會觸發visibilitychange事件.

document.addEventListener("visibilitychange", function() {
    console.log(document.visibilityState);
    if(document.visibilityState == "hidden") {
        console.log('隱藏');
    } else if (document.visibilityState == "visible") {
        console.log('顯示')
    }
});

 

2.使用onblur 和 onfocus

通過獲取失去焦點判斷頁面是否在最前端

var count = 1;
var interval_output = null;
     
function output_number() {
    document.body.innerHTML += (count + " ");
    count++;
}
     
// window 失去焦點，停止輸出
window.onblur = function() {
    clearInterval(interval_output);
};
     
// window 每次獲得焦點
window.onfocus = function() {
    // 每 1 秒在頁面輸出一個數
    interval_output = setInterval(function() {
        output_number();
    }, 1000);
}

 

參考地址: https://zhidao.baidu.com/question/541794991.html

https://developer.mozilla.org/zh-CN/docs/Web/Events/visibilitychange