最簡(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變量來檢測(cè)是否聯(lián)網(wǎng)

?1234567891011 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ò)資源的問題就是檢測(cè)的互聯(lián)網(wǎng)，如果是局域網(wǎng)檢測(cè)是無能為力了。

這時(shí)候需要一個(gè)更好的解決方案，就要用到navigator.onLine，這個(gè)屬性比較坑的就是瀏覽器兼容，chrome、Safari 都完美支持，IE7以上是支持的。火狐和IE6比較坑，只有在瀏覽器“脫機(jī)狀態(tài)”下才返回false，其他都返回true。掐了網(wǎng)線都是true，Opera直接不支持了。

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

?123456789 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)求。

更多信息請(qǐng)查看IT技術(shù)專欄