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