使用JS在瀏覽器中判斷當(dāng)前網(wǎng)絡(luò)連接狀態(tài)的幾種方法
使用JS在瀏覽器中判斷當(dāng)前網(wǎng)絡(luò)狀態(tài)的幾種方法如下：
1. navigator.onLine
2. ajax請(qǐng)求
3. 獲取網(wǎng)絡(luò)資源
4. bind()
1. navigator.onLine
通過(guò)navigator.onLine判斷當(dāng)前網(wǎng)絡(luò)狀態(tài)：
if(navigator.onLine){
...
}else{
...
}
非常簡(jiǎn)單，但是并不準(zhǔn)確-根據(jù)MDN的描述：
navigator.onLine只會(huì)在機(jī)器未連接到局域網(wǎng)或路由器時(shí)返回false，其他情況下均返回true。
也就是說(shuō)，機(jī)器連接上路由器后，即使這個(gè)路由器沒聯(lián)通網(wǎng)絡(luò)，navigator.onLine仍然返回true。
2. ajax請(qǐng)求
采用get請(qǐng)求的方式，根據(jù)返回值判斷是否能夠成功get到數(shù)據(jù)，從而確定當(dāng)前的網(wǎng)絡(luò)狀態(tài)：
$.ajax({
url: 'x.html',
success: function(result){
...
},
error: function(result){
...
}
});
3. 獲取網(wǎng)絡(luò)資源
原理同2，在頁(yè)面放一張隱藏圖片，設(shè)置其onerror函數(shù)(獲取圖片資源失敗時(shí)會(huì)調(diào)用該函數(shù))：
<script src="./jquery-3.1.1.min.js"></script>
<script>
function getImgError(){
alert("Network disconnect!");
}
$().ready(function(){
$("#btn-test").click(function(){
var imgPath = "https://www.baidu.com/img/bd_logo1.png";
var timeStamp = Date.parse(new Date());
$("#img-test").attr("src", imgPath + "?timestamp=" + timeStamp);
});
});
</script>
<body>
<img id="img-test" style="display:none;" onerror="getImgError()"/>
<button id="btn-test">check status</button>
</body>
每次點(diǎn)擊button時(shí)，更新該圖片的src。若獲取圖片失敗，則認(rèn)為網(wǎng)絡(luò)連接失敗
這種判斷網(wǎng)絡(luò)狀態(tài)的準(zhǔn)確完全取決于圖片資源是否穩(wěn)定。。。
4. bind()
原理同1：
var netStatue = true;
$(window).bind('online', function(){
netStatue = true;
});
$(window).bind('offline', function(){
netStatue = false;
});
...
if(netStatue){
...
}else{
...
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)的簡(jiǎn)單表單驗(yàn)證功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單表單驗(yàn)證功能,涉及javascript針對(duì)表單提交內(nèi)容的獲取、判斷、焦點(diǎn)設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
判斷用戶是否在線的代碼，需要的朋友可以參考下。2011-03-03
詳解微信小程序（Taro）手動(dòng)埋點(diǎn)和自動(dòng)埋點(diǎn)的實(shí)現(xiàn)
這篇文章主要介紹了詳解微信小程序（Taro）手動(dòng)埋點(diǎn)和自動(dòng)埋點(diǎn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
JS實(shí)現(xiàn)表單驗(yàn)證功能(驗(yàn)證手機(jī)號(hào)是否存在，驗(yàn)證碼倒計(jì)時(shí))
js實(shí)現(xiàn)表單驗(yàn)證功能，通過(guò)js代碼驗(yàn)證手機(jī)號(hào)是否存在驗(yàn)證碼倒計(jì)時(shí)功能，代碼簡(jiǎn)單易懂非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-10-10
這篇文章主要介紹了js中l(wèi)et能否完全替代IIFE，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06![深入理解選擇框腳本[推薦]](http://img.jbzj.com/images/xgimg/bcimg5.png)
選擇框是通過(guò)<select>和<option>元素創(chuàng)建的，又稱為下拉列表框。為了方便與這個(gè)控件交互，除了所有表單字段共有的屬性和方法外，javascript還提供了一些屬性和方法。本文將詳細(xì)介紹選擇框腳本2016-12-12
CocosCreator骨骼動(dòng)畫之龍骨DragonBones
這篇文章主要介紹了怎么在CocosCreator中使用骨骼動(dòng)畫龍骨DragonBones，對(duì)骨骼動(dòng)畫感興趣的同學(xué)，可以試一下2021-04-04
前端URL拼接路徑參數(shù)具體實(shí)現(xiàn)代碼
這篇文章主要給大家介紹了關(guān)于前端URL拼接路徑參數(shù)具體實(shí)現(xiàn)的相關(guān)資料,url地址拼接是經(jīng)常會(huì)遇到的問(wèn)題,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
js運(yùn)動(dòng)框架_包括圖片的淡入淡出效果，需要的朋友可以參考一下2013-05-05
千分位數(shù)字格式化(用逗號(hào)隔開 代碼已做了修改 支持0-9位逗號(hào)隔開)的JS代碼
這篇文章主要介紹了千分位數(shù)字格式化的JS代碼，有需要的朋友可以參考一下2013-12-12