1. navigator.onLine

通過navigator.onLine判斷當前網絡狀態：

if(navigator.onLine){
 ...
}else{
 ...
}

非常簡單，但是並不准確-根據MDN的描述：
navigator.onLine只會在機器未連接到局域網或路由器時返回false，其他情況下均返回true。
也就是說，機器連接上路由器后，即使這個路由器沒聯通網絡，navigator.onLine仍然返回true。

2. ajax請求

采用get請求的方式，根據返回值判斷是否能夠成功get到數據，從而確定當前的網絡狀態：

$.ajax({
 url: 'x.html',
 success: function(result){
 ...
 }, 
 error: function(result){
 ...
 }
});

3. 獲取網絡資源

原理同2，在頁面放一張隱藏圖片，設置其onerror函數(獲取圖片資源失敗時會調用該函數)：

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

每次點擊button時，更新該圖片的src。若獲取圖片失敗，則認為網絡連接失敗。

PS: 三種方法都不是很理想，但暫時尚未找到更好的解決方案。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js判斷客戶端訪問是安卓還是ios JS判斷客戶端是手機還是PC js 判斷網絡狀態 JS判斷瀏覽器類型，JS判斷客戶端操作系統 H5案例分享：使用JS判斷客戶端、瀏覽器、操作系統類型 JS - H5使用 socket.io - 客戶端 JS判斷客戶端是否是iOS或者Android手機移動端 Flyway客戶端使用 apolloJava客戶端的使用 clickhouse客戶端使用