我需要一些幫助，我可以使用Javascript或jQuery或任何庫（如果可用）檢查互聯網連接。因爲我正在開發一個離線應用程序，如果用戶離線，我想顯示一個版本，如果用戶在線，則顯示另一個版本。如何檢查用戶是否使用JavaScript或任何庫在線？
目前我正在使用此代碼：
if (navigator.onLine) {
alert('online');
} else {
alert('offline');
}但是這是工作非常緩慢的檢測。有時它只連接到沒有互聯網的網絡，需要5到10秒才能提醒false（沒有互聯網）。
我看了一下Offline.js庫，但我不確定這個庫對我的情況是否有用。並且我不知道如何使用它
看看Detect that the Internet connection is offline?基本上，對你知道可能會出現的東西（比如說google.com）發出ajax請求，如果失敗，就沒有互聯網連接。
我剛剛得到的代碼功能，該位從Mozilla Site：
window.addEventListener('load', function(e) {
if (navigator.onLine) {
console.log('We\'re online!');
} else {
console.log('We\'re offline...');
}
}, false);
window.addEventListener('online', function(e) {
console.log('And we\'re back :).');
}, false);
window.addEventListener('offline', function(e) {
console.log('Connection is down.');
}, false);
他們甚至有一個link to see it working。我在IE，Firefox和Chrome上試過了。 Chrome顯得最慢，但只有大約半秒。
Mozilla文檔：「在Chrome和Safari瀏覽器中，如果瀏覽器無法連接到局域網（LAN）或路由器，則它處於脫機狀態;所有其他情況都會返回true。」 https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine，它不會有效檢測到互聯網正在關閉，而是您的局域網關閉。 – dman2306
非常感謝您的回覆，我已經試過了，這在頁面加載時不起作用！它只適用於互聯網狀態變化 –
@ dman2306 Bravo鏈接完全相同的文章，我鏈接在我的答案;）。 –
如果您使用MS Web技術進行開發，則可以使用SignalR。 SignalR將根據您的服務器/客戶端瀏覽器技術建立長輪詢或網絡套接字，這對開發人員來說是透明的。除了確定您是否有活動的網站連接之外，您不需要使用它。
如果SignalR由於任何原因斷開連接，那麼只要SignalR服務器實例在網站上實際安裝，就失去了與該站點的連接。因此，您可以使用客戶端上的$ .connection.hub.disconnected（）事件/方法來設置保存連接狀態的全局變量。
閱讀上漲約SignalR，以及如何使用它來確定這裏連接狀態...... http://www.asp.net/signalr/overview/guide-to-the-api/handling-connection-lifetime-events#clientdisconnect
我想你應該嘗試OFFLINE.js ..它看起來很容易使用，只要給它一個嘗試。
它甚至提供了選項checkOnLoad，它在頁面加載時立即檢查連接。
Offline.check（）：檢查連接的當前狀態。
Offline.state：
還沒有嘗試過的連接「上」或「下」的當前狀態，將是很好的知道，如果它按預期工作。
編輯把一個小高峯到代碼，它使用與失敗XHR請求的方法THIS SO提出問題
navigator.onLine是維護一個真/假值的屬性（真正的在線，虛假離線）。只要用戶切換到「離線模式」，該屬性就會更新。
window.addEventListener('load', function() {
function updateOnlineStatus(event) {
document.body.setAttribute("data-online", navigator.onLine);
}
updateOnlineStatus();
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
});
您可以使用新的Fetch API將幾乎立即觸發一個錯誤，如果沒有網絡存在。
的問題，這是在提取API具有infant support的時刻（目前Chrome提供了最穩定的實現，Firefox和Opera越來越有，IE不支持它）。存在一個支持獲取原則但不一定像純粹的實現那樣快速返回的支持。另一方面，一個離線應用程序將需要一個現代的瀏覽器...
一個例子，將試圖通過HTTPS加載一個純文本文件，以避免CORS要求（鏈接隨機挑選，你應該建立一個服務器有一個小的文本文件來測試對 - 測試在Chrome，現在）：
fetch("https://link.to/some/testfile")
.then(function(response) {
if (response.status !== 200) { // add more checks here, ie. 30x etc.
alert("Not available"); // could be server errors
}
else
alert("OK");
})
.catch(function(err) {
alert("No network"); // likely network errors (incl. no connection)
});
另一個選擇是設立一個Service worker，並使用從那裏獲取。這樣，當請求的頁面不可用時，您可以提供可選/自定義脫機頁面或緩存頁面。這也是一個非常新鮮的API。
嘗試利用WebRTC，參見diafygi/webrtc-ips;部分
此外，這些STUN請求被正常 XMLHttpRequest的程序的外部進行，所以它們不是在顯影劑 控制檯可見的或能夠通過插件，如AdBlockPlus或 Ghostery的被阻止。這使得這些類型的請求可用於在線 跟蹤廣告商是否設置了帶有通配符域的STUN服務器。
修改微創登錄 「在線」 或 「離線」 在console
// https://github.com/diafygi/webrtc-ips
function online(callback){
//compatibility for firefox and chrome
var RTCPeerConnection = window.RTCPeerConnection
|| window.mozRTCPeerConnection
|| window.webkitRTCPeerConnection;
var useWebKit = !!window.webkitRTCPeerConnection;
//bypass naive webrtc blocking using an iframe
if(!RTCPeerConnection) {
//NOTE: you need to have an iframe in the page
// right above the script tag
//
//<iframe id="iframe" sandbox="allow-same-origin" style="display: none"></iframe>
//<script>...getIPs called in here...
//
var win = iframe.contentWindow;
RTCPeerConnection = win.RTCPeerConnection
|| win.mozRTCPeerConnection
|| win.webkitRTCPeerConnection;
useWebKit = !!win.webkitRTCPeerConnection;
}
//minimal requirements for data connection
var mediaConstraints = {
optional: [{RtpDataChannels: true}]
};
//firefox already has a default stun server in about:config
// media.peerconnection.default_iceservers =
// [{"url": "stun:stun.services.mozilla.com"}]
var servers = undefined;
//add same stun server for chrome
if(useWebKit)
servers = {iceServers: [{urls: "stun:stun.services.mozilla.com"}]};
//construct a new RTCPeerConnection
var pc = new RTCPeerConnection(servers, mediaConstraints);
//create a bogus data channel
pc.createDataChannel("");
var fn = function() {};
//create an offer sdp
pc.createOffer(function(result){
//trigger the stun server request
pc.setLocalDescription(result, fn, fn);
}, fn);
//wait for a while to let everything done
setTimeout(function(){
//read candidate info from local description
var lines = pc.localDescription.sdp.split("\n");
// return `true`:"online" , or `false`:"offline"
var res = lines.some(function(line) {
return line.indexOf("a=candidate") === 0
});
callback(res);
}, 500);
}
//Test: Print "online" or "offline" into the console
online(function(connection) {
if (connection) {
console.log("online")
} else {
console.log("offline")
}
});// check if online/offline
// http://www.kirupa.com/html5/check_if_internet_connection_exists_in_javascript.htm
function doesConnectionExist() {
var xhr = new XMLHttpRequest();
var file = "http://www.yoursite.com/somefile.png";
var randomNum = Math.round(Math.random() * 10000);
xhr.open('HEAD', file + "?rand=" + randomNum, false);
try {
xhr.send();
if (xhr.status >= 200 && xhr.status < 304) {
return true;
} else {
return false;
}
} catch (e) {
return false;
}
}
我的解決辦法是搶非常小的圖像（ 1x1），沒有緩存和總是在線。
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
function onLine() {
alert("onLine")
}
function offLine() {
alert("offLine")
}
var i = new Image();
i.onload = onLine;
i.onerror = offLine;
i.src = 'http://www.google-analytics.com/__utm.gif';
});
</script>
<body>
注：
使用本地副本jQuery否則將無法正常工作離線。
我測試了代碼onLine/offLine，它的工作原理沒有延遲。
適用於所有瀏覽器，臺式機或手機。
如果您想知道，由於我們不使用任何參數，因此沒有使用Google Analytics進行跟蹤。
隨意更改圖像，只要確保它不會被緩存，並且尺寸很小。
你能定義_very很慢detect_？ –
可能重複的[檢測到互聯網連接脫機？]（http://stackoverflow.com/questions/189430/detect-that-the-internet-connection-is-offline） – jmoerdyk
@jmoerdyk是公平的，該帖子已經有7年的歷史了，從那時起技術已經發生了突飛猛進的發展，不僅如此，它看起來好像OP從Edmhs那裏得到了他們的代碼。 –