javascript 判斷是否上線- navigator.onLine

判斷目前是否在連線狀態，基本的用法如下

view plaincopy to clipboardprint

1. document.write( navigator.onLine );  

會回傳ture或false

像fb就有用這個功能，當你是斷線的狀態，好友動態跟聊天室就會變半透明，顯示為離線狀態。

所以在html內加一個id="check"的div，讓他顯示目前是否online

view plaincopy to clipboardprint

1. checkOnLine();   
2. function checkOnLine(){   
3.     if (typeof(navigator.onLine)!="undefined"){   
4.         checkHandler();   
5.     }else{   
6.         $("#check").text("你的瀏覽器不支援偵測是否online");   
7.     }   
8. }   
9. function checkHandler(){   
10.     var status=navigator.onLine;   
11.     if(status){   
12.         $("#check").text("online");   
13.     }else{   
14.         $("#check").text("offline");   
15.     }   
16. }  

可以增加一個button，點擊後檢查是否online

view plaincopy to clipboardprint

1. $("#checkBtn").click(function(){   
2.     checkOnLine()   
3. });  

如果要在切換online/offline就判斷，就要用

view plaincopy to clipboardprint

1. $(window).on("online offline", checkOnLine());  

Demo

參考
Check if connected to a network; jQuery
JavaScript navigator.onLine連線或離線偵測模式