快捷導(dǎo)航

javascript檢測是否聯(lián)網(wǎng)的實現(xiàn)代碼

更新時間：2014年09月28日 17:13:51 投稿：mdxy-dxy

這篇文章主要介紹了javascript檢測是否聯(lián)網(wǎng)的實現(xiàn)代碼,需要的朋友可以參考下

最簡單粗暴的方式就是加載網(wǎng)絡(luò)資源，JS文件或者圖片文件。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

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

用jQuery變量來檢測是否聯(lián)網(wǎng)

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());

加載網(wǎng)絡(luò)資源的問題就是檢測的互聯(lián)網(wǎng)，如果是局域網(wǎng)檢測是無能為力了。
這時候需要一個更好的解決方案，就要用到navigator.onLine，這個屬性比較坑的就是瀏覽器兼容，chrome、Safari 都完美支持，IE7以上是支持的?；鸷虸E6比較坑，只有在瀏覽器“脫機狀態(tài)”下才返回false，其他都返回true。掐了網(wǎng)線都是true，Opera直接不支持了。

所以還得加一個兼容方法：給location.hostname地址發(fā)一個http頭請求，代碼如下：

var xhr = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" );
var status;
xhr.open( "HEAD", "http://" + 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方法的第三個參數(shù)要傳false，必須是同步請求。

總結(jié)：支持navigator.onLine的瀏覽器就用navigator.onLine，不支持的就發(fā)一個http頭請求。

原創(chuàng)文章，轉(zhuǎn)載請注明：轉(zhuǎn)載自前端開發(fā)

您可能感興趣的文章:

聯(lián)網(wǎng)

相關(guān)文章

js+html制作簡單日歷的方法
這篇文章主要為大家詳細(xì)介紹了js html制作簡單日歷的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
Javascript實現(xiàn)圖片輪播效果(一)讓圖片跳動起來
圖片輪播效果，在各大網(wǎng)站的首頁都能看到，比較常見，下面腳本之家小編給大家介紹Javascript實現(xiàn)圖片輪播效果(一)讓圖片跳動起來，需要的朋友參考下
2016-02-02
js字符串去重復(fù)id的實現(xiàn)代碼
最近由于需要我們將相關(guān)id的重復(fù)的去掉，一個是客戶端一個后臺程序把關(guān)，這里分享下js的去重復(fù)id的實現(xiàn)代碼
2013-07-07
一些相見恨晚的 JavaScript 技巧
本文從7個方面講述 JavaScript 中那些你不很熟知但非常實用的技巧。
2010-04-04
js new Date()實例測試
在本篇文章中小編給各位整理的是關(guān)于js new Date()測試的相關(guān)實例代碼，有需要的朋友們參考學(xué)習(xí)下。
2019-10-10
addRule在firefox下的兼容寫法
addRule在firefox下的兼容寫法...
2006-11-11
javascript實現(xiàn)獲取圖片大小及圖片等比縮放的方法
這篇文章主要介紹了javascript實現(xiàn)獲取圖片大小及圖片等比縮放的方法,涉及javascript針對圖形圖像相關(guān)屬性獲取與修改相關(guān)操作技巧,需要的朋友可以參考下
2016-11-11
js中精確計算加法和減法示例
這篇文章主要介紹了js中如何精確計算加法和減法,需要的朋友可以參考下
2014-03-03
js contains方法實現(xiàn)代碼
IE有許多好用的方法，后來都被其他瀏覽器抄襲了，比如這個contains方法。如果A元素包含B元素，則返回true，否則false。唯一不支持這個方法的是IE的死對頭firefox。
2011-01-01
淺談javascript如何獲取文件后綴名
這篇文章主要介紹了淺談javascript如何獲取文件后綴名，文章通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08