首頁 > 開發者 > JavaScript
標籤：app eve div html5 head rip off upper btn
如今HTML5 行動裝置 App或 Web app 中越來越普遍的使用了離線瀏覽技術，所以用 JavaScript 檢測瀏覽器線上/離線狀態非常常見。
無論瀏覽器是否線上，navigator.onLine 屬性都會提供一個布爾值。 如果瀏覽器線上，則設定為 true ，否則設定為 false 。
if(navigator.onLine) { // true|false // ... }
online 和 offline 事件：
當瀏覽器離線或上線時，瀏覽器還支援 online 和 offline 事件。
window.addEventListener(‘online‘, function(e){console.log(‘online‘)});window.addEventListener(‘offline‘, function(e){console.log(‘offline‘);});
你可以使用幾種熟悉的方式來註冊事件：
window，document，或 document.body 上使用 addEventListenerdocument 或 document.body 的 ononline 或 onoffline 屬性設定為一個 JavaScript Function 對象。(注意：由於相容性原因，不能使用 window.ononline 或 window.onoffline。)body 標籤上指定 ononline=”…” 或 onoffline=”…” 特性。注意事項：
執行個體代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用 JavaScript 檢測瀏覽器線上/離線狀態（JavaScript API?—?navigator.onLine）</title> <style type="text/css"> #status { position: fixed; width: 100%; font: bold 1em sans-serif; color: #FFF; padding: 0.5em; } #log { padding: 2.5em 0.5em 0.5em; font: 1em sans-serif; } .online { background: green; } .offline { background: red; } </style></head><body><div id="status"></div><div id="log"></div><button type="button" id="test">檢查狀態</button><script>window.addEventListener(‘load‘, function () { var testBtn = document.getElementById("test"); var status = document.getElementById("status"); var log = document.getElementById("log"); function updateOnlineStatus(event) { var condition = navigator.onLine ? "online" : "offline"; status.className = condition; status.innerHTML = condition.toUpperCase(); log.insertAdjacentHTML("beforeend", "Event: " + (event?event.type:"-") + "; Status: " + condition+ " | "); } window.addEventListener(‘online‘, updateOnlineStatus); window.addEventListener(‘offline‘, updateOnlineStatus); testBtn.addEventListener("click", updateOnlineStatus); updateOnlineStatus();});</script></body></html>
用 JavaScript 檢測瀏覽器線上/離線狀態（JavaScript API?—?navigator.onLine）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
