快捷導(dǎo)航

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)載自前端開發(fā)

您可能感興趣的文章:

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

相關(guān)文章

淺析BootStrap模態(tài)框的使用(經(jīng)典)
Bootstrap Modals（模態(tài)框）是使用定制的 Jquery 插件創(chuàng)建的。本文給大家介紹BootStrap模態(tài)框的使用，感興趣的朋友一起學(xué)習(xí)吧
2016-04-04
從零開始用electron手?jǐn)]一個(gè)截屏工具的示例代碼
這篇文章主要介紹了從零開始用electron手?jǐn)]一個(gè)截屏工具的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
基于JavaScript實(shí)現(xiàn)簡(jiǎn)單的音樂(lè)音譜圖效果
我們經(jīng)常看到在聽樂(lè)音的時(shí)候,會(huì)有音譜圖隨著音樂(lè)的節(jié)奏不斷變化給人視覺(jué)上的享受,那么本文我們就來(lái)通過(guò)JavaScript來(lái)實(shí)現(xiàn)這一效果,感興趣的可以了解下
2023-11-11
JS中Map、WeakMap和Object的區(qū)別解析
Map、WeakMap和Object都是JavaScript中用于存儲(chǔ)鍵值對(duì)的數(shù)據(jù)結(jié)構(gòu)，它們?cè)阪I類型、垃圾回收、可枚舉性、方法和操作、以及繼承等方面存在一些區(qū)別，適用于不同的場(chǎng)景，本文給大家詳細(xì)講解js map、weakmap和object區(qū)別，需要的朋友可以參考下
2023-04-04
smartcrop.js智能圖片裁剪庫(kù)
為了測(cè)試這個(gè)智能識(shí)別插件，我試了很多壁紙圖片，都能智能裁剪出圖片的主體部分，轉(zhuǎn)而嘗試了一下chrome和Firefox以及IE，發(fā)現(xiàn)IE只有10以上的版本才支持，chrome和Firefox支持，手機(jī)瀏覽器不支持，這到底是啥黑科技？？今天我們就來(lái)詳細(xì)看看
2015-10-10
js實(shí)現(xiàn)有趣的倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)有趣的倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
使用Browserify來(lái)實(shí)現(xiàn)CommonJS的瀏覽器加載方法
下面小編就為大家?guī)?lái)一篇使用Browserify來(lái)實(shí)現(xiàn)CommonJS的瀏覽器加載方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
使用ionic切換頁(yè)面卡頓的解決方法
使用ionic開發(fā)app的時(shí)候，會(huì)發(fā)現(xiàn)切換頁(yè)面的動(dòng)畫會(huì)卡頓，并不流暢，為了保證用戶體驗(yàn)，大家采用cordova提供的native transitions可以讓頁(yè)面切換近乎原型的體驗(yàn)，一起通過(guò)本文學(xué)習(xí)下具體實(shí)現(xiàn)思路
2016-12-12
js 數(shù)據(jù)類型判斷的方法
這篇文章主要介紹了js 數(shù)據(jù)類型判斷的方法，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2020-12-12
百度Popup.js彈出框進(jìn)化版拖拽小框架發(fā)布兼容IE6/7/8,Firefox,Chrome
百度空間的彈出窗口和拖拽效果(也就是popup.js),代碼精簡(jiǎn)，效果也很好，我們可以在很多大型網(wǎng)站上見到這種效果，在我的項(xiàng)目中也使用了該js。
2010-04-04