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

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

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

最簡(jiǎ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變量來(lái)檢測(cè)是否聯(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ò)資源的問(wèn)題就是檢測(cè)的互聯(lián)網(wǎng)，如果是局域網(wǎng)檢測(cè)是無(wú)能為力了。
這時(shí)候需要一個(gè)更好的解決方案，就要用到navigator.onLine，這個(gè)屬性比較坑的就是瀏覽器兼容，chrome、Safari 都完美支持，IE7以上是支持的?；鸷虸E6比較坑，只有在瀏覽器“脫機(jī)狀態(tài)”下才返回false，其他都返回true。掐了網(wǎng)線都是true，Opera直接不支持了。

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

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;
 }

里面一個(gè)要注意的就是open方法的第三個(gè)參數(shù)要傳false，必須是同步請(qǐng)求。

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

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

您可能感興趣的文章:

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

相關(guān)文章

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