Làm thế nào nhận biết end-user chuyển tab hoặc thu nhỏ trình duyệt trong JS

Hôm nay mình sẽ show đến các bạn một tip nho nhỏ, tip này mình thấy một vài trang web download file kèm quảng cáo hay áp dụng, đó là nhận biết khi nào người dùng chuyển tab hoặc thu nhỏ trình duyệt bằng JS. Khi thu nhỏ hoặc chuyển tab thì họ cho dừng quảng cáo lại, khi người dùng vào lại page đó thì tiếp tục quảng cáo tiếp đến khi nào xong thì mới thôi (mục đích là bắt người dùng xem cho hết quảng cáo).

Tên của API được hỗ trợ sẵn này là page visibility nó detect được cái page hiện tại đang ở trạng thái hidden (ẩn) hay là visible (hiện), nó được trigger khi người dùng chuyển tab hoặc thu nhỏ. Thôi lang man ròi, chúng ta vào vấn đề luôn nhé.

        JS
        
      
document.addEventListener('visibilitychange', function () {
  console.info(document.visibilityState);
});

Đây là kết quả chạy trên trình duyệt FireFox.

Trên Google Chrome

Thuộc tính document.visibilityState trả về sẽ trả về một trong 2 state hiện tại của page: 'visible' và 'hidden'. Cả hai đều là string, nên chúng ta cần check như sau để làm được như ý.

        JS
        
      
document.addEventListener('visibilitychange', function () {
  if (document.visibilityState === 'visible') {
    // TODO cho chạy quảng cáo
  } else {
    // hidden
    // TODO cho dừng quảng cáo
  }
});

Thuộc tính `document.hidden`

Ngoài ra còn một thuộc tính nữa giúp bạn nhận biết page hiện tại có phải đang ẩn không (end-user đã sang chuyển tab khác hoặc thu nhỏ). Đó là document.hidden. Thuộc tính này trả về true hoặc false, với true là đang ẩn còn false là ngược lại.

        JS
        
      
document.addEventListener('visibilitychange', function () {
  console.info(document.hidden);
});

Do thuộc tính document.visibilityState chỉ hỗ trợ Chrome 33, Firefox 18, … (xem thêm bên dưới) trở lên, nên chúng ta sẽ dùng document.hidden trong vài trường hợp. Trên MDN web docs có đoạn code example, các bạn tham khảo thêm Example check page visibility bằng document.hidden trên nhiều trình duyệt cũ.

Thuộc tính document.hidden

Tham khảo

Thuộc tính `document.hidden`