js 判斷是否網絡斷了

時間 2019-11-05

原文原文鏈接

最佳方法：

結合下面的方法混合使用javascript

在IE和Firefox上使用Ajax輪詢檢查網絡是否斷了，其餘瀏覽器上使用 online 和offline事件偵聽網絡。php

引用

html<head>
    <script type="text/javascript" src="online.js"></script>
</head>

設置輪詢時間和地址

time：時間不設置默認2000
url：不設置默認全部瀏覽器用 online 和 offline事件html

jsvar net = onlinenetwork({
    "time":1000,
    "url":"http://*******.com/ping.php"
})

連上網絡執行

jsnet.onLineHandler(function(){
    console.log("連上了！")
})

斷開網絡執行

jsnet.offLineHandler(function(){
    console.log("斷開網絡！")
})

通常判斷方法:

方法一：利用online和offline事件

此方法是經過 online 和 offline 事件來偵聽是否斷網，可是這個在 IE 和 Firefox 中，並不是斷網了就是真的斷網了。（如火狐中在選擇 菜單>>文件>>脫機工做纔會觸發 online 和 offline 事件）java

總之在IE和Firefox中通常狀況下不能觸發這倆事件，只有在選擇脫機狀態下才能觸發此事件。git

jswindow.addEventListener('load', function() {
    var status = document.getElementById("status");
    function updateOnlineStatus(event) {
        var condition = navigator.onLine ? "online" : "offline";
        status.className = condition;
        status.innerHTML = condition.toUpperCase();
    }
    window.addEventListener('online',  updateOnlineStatus);
    window.addEventListener('offline', updateOnlineStatus);
});

方法二：Ajax輪詢

你懂的github

jssetInterval(function(){
    //Ajax...
},1000)

方法三：利用IMG的onerror事件

經過輪詢生成 IMG 經過 img 的 onerror 事件判斷是否斷網
此方法弱點就是耗流量（一像素的空gif 輪詢一次 1.43KB ）手機上用那就蛋疼了(這個樣子就會偷偷跑流量...)。瀏覽器

jssetInterval(function(){
    var $img = $('<img src="http://jslite.io/blank.gif?'+(new Date())+'">')
    $img.appendTo('body').css("display","none").load(function(){
        console.log("鏈接成功！")
        $(this).remove()
    }).error(function(){
        console.log("斷網了！")
        $(this).remove()
    })
},2000)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。