Tự làm mới trang khi tab trình duyệt bị ẩn bằng JavaScript

Phương thức hoạt động của code JavaScript nếu phát hiện trang hiện tại bị ẩn sẽ tự làm mới lại và hành động này sẽ lặp lại sau một khoảng thời gian nhất định nếu trang web đó vẫn bị ẩn không xem hoặc bị tắt.

Khi truy cập trang web của bạn, người đọc cũng có thể xem các trang web khác ở các tab trình duyệt khác nhau. Vậy khi người đọc chuyển sang xem tab trình duyệt khác thì tab trang web của bạn sẽ bị ẩn và do đó bạn cần cho trang web tự làm mới và lặp lại sau một khoảng thời gian cố định.

Điều này rất phù hợp với các trang web tin tức có số lượng bài đăng lớn và thường xuất bản bài mới. Mục đích tự làm mới trang để giúp người đọc bắt kịp bài mới khi tác giả xuất bản bài đăng.

Phương thức hoạt động của code JavaScript nếu phát hiện trang hiện tại bị ẩn sẽ tự làm mới lại và hành động này sẽ lặp lại sau một khoảng thời gian nhất định nếu trang web đó vẫn bị ẩn không xem hoặc bị tắt. Nếu tiếp tục chuyển qua xem lại trang web, code JavaScript sẽ không hoạt động và tiếp tục hoạt động nếu trang web lại bị ẩn.

Code JavaScript chèn trước thẻ đóng </body>

<script>//<![CDATA[
var hidden, visibilityChange
if (typeof document.hidden !== 'undefined') {
  hidden = 'hidden'
  visibilityChange = 'visibilitychange'
} else if (typeof document.msHidden !== 'undefined') {
  hidden = 'msHidden'
  visibilityChange = 'msvisibilitychange'
} else if (typeof document.webkitHidden !== 'undefined') {
  hidden = 'webkitHidden'
  visibilityChange = 'webkitvisibilitychange'
}
function refresh_page() {
  if (document[hidden]) {
    setInterval(function() {
      location.reload()
    }, 60000)
  }
}
refresh_page()
if (typeof document.addEventListener !== 'undefined' || hidden !== undefined) {
  document.addEventListener(visibilityChange, refresh_page, false)
}
//]]></script>

Lưu ý về mốc thời gian 60000 được tính bằng mili giây (1 gây = 1000 mili giây), như vậy có thể hiểu với con số 60000 là cứ sau 1 phút trang web bị ẩn sẽ tự làm mới lại, bạn có thể thay đổi số phù hợp với trang Blog của bạn.

Thêm đánh giá

Trở thành người đầu tiên bình luận cho bài viết này!