檢查是否連接到網絡; jQuery

我已經通過StackOverflow進行了搜索，並且已經看到了關於如何做到這一點的各種主題，但沒有真正涉及到我的特殊情況。我正在編寫一個移動「應用程序」（使用HTML5，CSS，jQuery）。它將最終成爲一個獨立的「應用程序」，這將包含所有需要的文件的本地副本。在我的一個頁面上我有一個提交表單，並且由於用戶無法在離線狀態下提交表單，我希望該頁面被重定向到一個自定義的404頁面。檢查是否連接到網絡; jQuery

我只是在尋找是否有辦法在jQuery中實現這一點，因爲我還沒有發現任何東西。

感謝

來源

2012-03-02 Brendan

你可以使用

if (navigator.onLine) { 
    // I'm online so submit the form. 
}

來源

2012-03-02 01:13:46 Bot

我按照您指定的方式嘗試;警告在if/else中。如果按我的預期完美工作，當我禁用我的網絡連接來測試其他時，它會失敗並仍然顯示if語句中顯示的內容。 – Brendan 2012-03-02 01:18:27

這不是傻瓜證明，它從瀏覽器獲取數據。 – Bot 2012-03-02 01:26:24

它只是顯示您是否處於「離線」模式，我正在尋找一種方法來實際檢查您是否可以訪問互聯網。 – Akbari 2016-10-27 06:21:07

您可以檢查navigator.onLine財產或聽offline/online事件：

$(document).on('offline online', function (event) { 
    alert('You are ' + event.type + '!'); 
});

來源：http://www.html5rocks.com/en/mobile/workingoffthegrid/

這裏是這些事件的一些MDN文檔：https://developer.mozilla.org/en/Online_and_offline_events

我不熟悉這些事件的自己，但如果你看了上面的鏈接，你會發現很多好的信息。

來源

2012-03-02 01:19:09 Jasper

這看起來像一個乾淨的方式來做到這一點，但是這些事件在所有瀏覽器中都能正常工作嗎？ – 2012-03-02 01:23:44

絕對不是:)。這是使用HTML5特定事件，這還不是官方規範。這裏是一個到'navigator.onLine'的MDN網站的鏈接：https：//developer.mozilla.org/en/DOM/window.navigator.onLine（瀏覽器支持位於底部） – Jasper 2012-03-02 01:29:38

@ToddMoses我將不得不測試它確定它的工作，但託德摩西的答案似乎是一個很好的使用。但是你可以使用一個小資源來加載而不是整個框架。例如，你可以託管自己的JS文件，該文件只是向全局範圍添加一個標誌，如果該標誌存在，則用戶在線。爲了確保JS文件沒有被緩存，你必須正確地設置文件的標題以便始終刷新。 – Jasper 2012-03-02 01:31:27

這裏是我會做什麼，基於：how to check if the user has the connection to the internet

首先，使用JavaScript庫的鏈接，以確定用戶在線。如果爲true，則將表單的操作屬性更改爲在線頁面，否則請更改離線頁面。

<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js></script> 
    <script> 
$('#target').submit(function() { 
    if (typeof window.$ !== 'function') { 
    $('myform').attr("action" , "offlinepage.html" ); 
    } 
    else 
    { 
    $('myform').attr("action" , "onlinepage.html" ); 
    } 
}); 
    </script>

來源

2012-03-02 01:22:48

實際上你根本就不需要jQuery。 HTML5本身爲在線/離線條件下運行的應用程序提供了一個整潔的工具 - cache manifest。緩存清單是<html>標籤的manifest屬性引用一個純文本文件：

<html manifest="cache.manifest">

這個清單文件的內容告訴瀏覽器，哪些資源需要聯機條件函數（NETWORK），該文件緩存（ CACHE）以及在離線時請求網絡資源時如何處理（FALLBACK）。

CACHE MANIFEST 
# the above line is required 

NETWORK: 
* 

FALLBACK: 
* error404.html 

CACHE: 
index.html 
about.html 
help.html 
# Plus all other resources required to make it look nice 
style/default.css 
images/logo.png 
images/backgound.png

使用清單，瀏覽器首先查閱清單，並沒有任何腳本，據此行爲根據是在線還是離線。

http://dev.w3.org/html5/spec-preview/offline.html#manifests

UPDATE：

請注意，響應內容類型的關鍵要求。純文本根本不起作用。

必須使用text/cache-manifest MIME類型來提供清單。

http://dev.w3.org/html5/spec-preview/offline.html#writing-cache-manifests

另外要注意，在清單中未列出的所有URL被從負載封鎖作爲結果。這就是爲什麼我通過通配符（*）修復了上述清單以允許「其餘」。這可能會幫助你開始。

來源

2012-03-05 14:46:50

有趣的....這可能是我正在尋找...假設我有5個網頁（index.html，contact.html，about.html，rates.html，reserve.html），索引將是無論如何顯示，以及關於頁面。聯繫我們，預訂和費率我想在離線時鏈接到自定義404頁面;我會怎麼做？ – Brendan 2012-03-05 20:11:47

@Brendan我已經更新了答案以適合您的情況。 – 2012-03-05 20:23:53

我給了你賞金，因爲即使我無法讓你的解決方案在我的普通瀏覽器上工作，我相信如果我嚴格爲移動設備編碼，這是一個好方法。 – Brendan 2012-03-06 03:23:22

嘗試設置ajaxSetup每n毫秒（我把1000放在這裏）做一個請求，並檢查它是否超時，然後禁用按鈕。

$.ajaxSetup({ 
    timeout: 1000, 
    error: function(request, status, maybe_an_exception_object) { 
     if(status != 'timeout') 
      //Code to enable button 
     else 
      //Code to disable button 
    } 
});

來源

2012-03-05 15:03:11 PraveenVenu

這可能會導致一些嚴重的連接開銷，當你有很多客戶端 – 2014-02-26 11:27:05

使用window.navigator.onLine是inherantly不可靠的，因爲用戶可能會被連接到網絡，但網絡不能訪問互聯網。

然而，這裏是一個準系統例如

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>Online status</title> 
    <script> 
    function updateIndicator() { 
    document.getElementById('indicator').textContent = navigator.onLine ? 'online' : 'offline'; 
    } 
    </script> 
</head> 
<body onload="updateIndicator()" ononline="updateIndicator()" onoffline="updateIndicator()"> 
    <p>The network is: <span id="indicator">(state unknown)</span> 
</body> 
</html>

看到活動的小提琴：http://jsfiddle.net/3rRWK/

來源

2012-11-22 13:20:06 Layke

大聲笑。在3年有效的答案上收到downvote。 :) – Layke 2014-05-15 08:29:04

我用下面的代碼來檢查連接。注意：以上解決方案都不適用於Firefox，它依賴於其內部的「脫機工作」狀態：

// Register listeners 
window.addEventListener("offline", function(){ 
    $('#globalDiv').hide(); 
    $("#message").html('WARNING: Internet connection has been lost.').show(); 
}); 
window.addEventListener("online", function(){ 
    $("#message").empty().hide(); 
    $('#globalDiv').show(); 
});

來源

2015-03-19 20:31:08

截至2015年這個答案似乎是最可靠的，如果你想要一個簡單的事件使用。 – dlsso 2015-11-16 17:17:02

如何在沒有網絡連接的情況下瀏覽頁面時在每個頁面中重新初始化。這是工作，但我需要允許導航通過網頁是否沒有網絡。以及我需要在每個頁面中顯示無網絡消息。 – user2584538 2016-05-10 08:25:24

您可以在頁面頂部將「無網絡」消息顯示爲橫幅，而不是阻止整個頁面，但允許在那裏導航，否則沒有網絡是另一主題。爲此，您需要將頁面緩存到本地。 HTML5有一個機制（緩存清單），請參考這個參考：http：//www.w3schools.com/html/html5_app_cache.asp – Webomatik 2016-05-15 22:15:01

檢查是否連接到網絡; jQuery

回答

相關問題