Segundo a MDN existem ambos os eventos online
e offline
, assim podes detetar mudanças instantaneamente e saber o estado sempre que precisares sem precisar de setTinterval
.
var online = navigator.onLine;
window.addEventListener("offline", function(e) { online = false; });
window.addEventListener("online", function(e) { online = true; });
alert(online);
Edit:
Precisei desta funcionalidade num projeto e percebí que a minha primeira resposta tem falhas. O problema dela é que diferentes browsers têm diferentes entendimentos do que é online
e offline
.
Encontrei outra solução que é de confiar. Precisa de usar o teu servidor e faz-se de 2 maneiras diferentes dependendo de teres CORS ativado ou não.
Com CORS ativo:
function testaLigacao(callback) {
var xhr = new XMLHttpRequest();
var url = "http://teusite.com"; // <--- o teu url aqui
var novoNumero = new Date().getTime();
xhr.open('HEAD', url + "?rand=" + novoNumero, true);
xhr.onreadystatechange = function () {
if (xhr.readyState != 4) return;
if (xhr.status >= 200 && xhr.status < 304) return callback(xhr.responseText, true);
return callback(xhr.responseText, false);
}
try {
xhr.send();
} catch (e) {
return callback(e, false);
}
}
* - este jsFiddle é emxemplo de como usar, não funciona porque está a usar um url fictício. Tens de usar o teu url
Com CORS bloqueado:
Neste caso vais ter de usar JSONP, e ter uma página que faça echo conforme o JSONP precisa. O JavaScript é:
function testaLigacao(callback) {
var response;
var callbackName = 'temp_callback_' + new Date().getTime() + Math.floor(Math.random() * 100);
window[callbackName] = function (res) {
delete window[callbackName];
document.body.removeChild(script);
response = res;
};
var src = 'http://teusite.com/ping.php?callback=' + callbackName;
var script = document.createElement('script');
script.src = src;
script.onload = function () {
callback(true);
}
script.onerror = function () {
callback(false);
}
document.body.appendChild(script);
}
* - este jsFiddle é emxemplo de como usar, não funciona porque está a usar um url fictício. Tens de usar o teu url
Mais sobre JSONP aqui (link).
Mais sobre CORS aqui (link)