Thuộc tính navigator.onLine trong HTML

Thuộc tính navigator.onLine trả về giá trị boolean cho biết trình duyệt đang ở chế độ online hay offline.

Cú pháp

navigator.onLine

Ví dụ

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
    text-align: center;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 20px;
    width: 330px;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem auto;
  }
  .show { font-size: 1.2rem; color: #fff; }
</style>
<body>
<h1>Demo navigator.onLine</h1>
<button class="btn" onclick="checkOnline()">Kiểm tra Online/Offline</button>
<div class="show"></div>
<script>
  function checkOnline() {
    var msg = document.querySelector(".show");
    if (navigator.onLine) {
      msg.innerHTML = "Bạn đang ONLINE";
    } else {
      msg.innerHTML = "Bạn đang OFFLINE";
    }
  }
  // Lắng nghe thay đổi trạng thái mạng
  window.addEventListener('online', () => console.log('Online'));
  window.addEventListener('offline', () => console.log('Offline'));
</script>
</body>
</html>

Kết quả

Nhấn "Kiểm tra Online/Offline". Thử ngắt mạng và nhấn lại để thấy thay đổi.

Mẹo: Kết hợp với sự kiện window.ononline và window.onoffline để tự động phát hiện thay đổi kết nối.