javascript檢測是否聯網的實作程式碼_javascript技巧

最簡單粗暴的方式就是載入網路資源，JS檔案或圖片檔案。

複製程式碼 程式碼如下:

typeof window.jQuery === "undefined" // return false or ture

用jQuery變數來偵測是否連網

function doConnectFunction() {
  return true;
}
function doNotConnectFunction() {
  return false;
}

 var i = new Image();
i.onload = doConnectFunction;
i.onerror = doNotConnectFunction;
i.src = 'http://su.bdimg.com/static/superplus/img/logo_white.png?d=' + escape(Date());

載入網路資源的問題就是偵測的互聯網，如果是區域網路偵測是無能為力了。
這時候需要一個更好的解決方案，就要用到navigator.onLine，這個屬性比較坑的就是瀏覽器相容，chrome、Safari 都完美支持，IE7以上是支援的。火狐和IE6比較坑，只有在瀏覽器「離線狀態」下才回傳false，其他都回傳true。掐了網路線都是true，Opera直接不支援了。

所以還要加上一個相容方法：給location.hostname位址發一個http頭請求，程式碼如下：

var xhr = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" );
var status;
xhr.open( "HEAD", "//" + window.location.hostname + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000), false );
 try {
  xhr.send();
  return ( xhr.status >= 200 && xhr.status < 300 || xhr.status === 304 );
 } catch (error) {
  return false;
 }

裡面一個要注意的就是open方法的第三個參數要傳false，必須是同步請求。

總結：支援navigator.onLine的瀏覽器就用navigator.onLine，不支援的就發一個http頭請求。

原創文章，轉載請註明： 轉載自前端開發