2013年2月26日 星期二

javascript 判斷是否上線- navigator.onLine

判斷目前是否在連線狀態,基本的用法如下
  1. document.write( navigator.onLine );  
會回傳ture或false

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

所以在html內加一個id="check"的div,讓他顯示目前是否online
  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
  1. $("#checkBtn").click(function(){   
  2.     checkOnLine()   
  3. });  

如果要在切換online/offline就判斷,就要用
  1. $(window).on("online offline", checkOnLine());  

Demo

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

1 意見:

莊景勛 提到...

感謝教學!
來捧場一下:)

Related Posts Plugin for WordPress, Blogger...