javascript - google - detectar navegador jquery
¿Cómo detectar evento en línea/fuera de línea entre navegadores? (15)
¿Has intentado usar trabajadores de servicio? http://www.html5rocks.com/en/tutorials/service-worker/introduction/
Intento detectar con precisión cuándo se desconecta el navegador, utilizando los eventos HTML5 en línea y fuera de línea.
Aquí está mi código:
<script>
// FIREFOX
$(window).bind("online", applicationBackOnline);
$(window).bind("offline", applicationOffline);
//IE
window.onload = function() {
document.body.ononline = IeConnectionEvent;
document.body.onoffline = IeConnectionEvent;
}
</script>
Funciona bien cuando presiono "Trabajar sin conexión" en Firefox o IE, pero funciona de forma aleatoria cuando desconecto el cable.
¿Cuál es la mejor manera de detectar este cambio? Me gustaría evitar repetir las llamadas ajax con tiempos de espera.
Aquí está mi solución.
Probado con IE, Opera, Chrome, FireFox, Safari, Phonegap WebApp en iOS 8 y Phonegap WebApp en Android 4.4.2
Esta solución no funciona con FireFox en localhost.
=============================================== ============================
onlineCheck.js (filepath: "root / js / onlineCheck.js):
var isApp = false;
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
isApp = true;
}
function isOnlineTest() {
alert(checkOnline());
}
function isBrowserOnline(no,yes){
//Didnt work local
//Need "firefox.php" in root dictionary
var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(''Microsoft.XMLHttp'');
xhr.onload = function(){
if(yes instanceof Function){
yes();
}
}
xhr.onerror = function(){
if(no instanceof Function){
no();
}
}
xhr.open("GET","checkOnline.php",true);
xhr.send();
}
function checkOnline(){
if(isApp)
{
var xhr = new XMLHttpRequest();
var file = "http://dexheimer.cc/apps/kartei/neu/dot.png";
try {
xhr.open(''HEAD'', file , false);
xhr.send(null);
if (xhr.status >= 200 && xhr.status < 304) {
return true;
} else {
return false;
}
} catch (e)
{
return false;
}
}else
{
var tmpIsOnline = false;
tmpIsOnline = navigator.onLine;
if(tmpIsOnline || tmpIsOnline == "undefined")
{
try{
//Didnt work local
//Need "firefox.php" in root dictionary
var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(''Microsoft.XMLHttp'');
xhr.onload = function(){
tmpIsOnline = true;
}
xhr.onerror = function(){
tmpIsOnline = false;
}
xhr.open("GET","checkOnline.php",false);
xhr.send();
}catch (e){
tmpIsOnline = false;
}
}
return tmpIsOnline;
}
}
=============================================== ============================
index.html (filepath: "root / index.html"):
<!DOCTYPE html>
<html>
<head>
...
<script type="text/javascript" src="js/onlineCheck.js" ></script>
...
</head>
...
<body onload="onLoad()">
...
<div onclick="isOnlineTest()">
Online?
</div>
...
</body>
</html>
=============================================== ============================
checkOnline.php (filepath: "root"):
<?php echo ''true''; ?>
Desde hace poco, navigator.onLine muestra lo mismo en todos los principales navegadores y, por lo tanto, es utilizable.
if (navigator.onLine) {
// do things that need connection
} else {
// do things that don''t need connection
}
Las versiones más antiguas que admiten esto de la manera correcta son: Firefox 41 , IE 9, Chrome 14 y Safari 5.
Actualmente esto representará casi todo el espectro de usuarios, pero siempre debe verificar qué tienen los usuarios de su página de capacidades.
Anterior a FF 41, solo se mostraría false si el usuario colocó el navegador manualmente en modo fuera de línea. En IE 8, la propiedad estaba en el body , en lugar de window .
fuente: caniuse
El atributo window.navigator.onLine y sus eventos asociados actualmente no son confiables en ciertos navegadores web ( especialmente en el escritorio Firefox ) como dijo @Junto, así que escribí una pequeña función (usando jQuery) que periódicamente verifica el estado de conectividad de la red y evento en online :
// Global variable somewhere in your app to replicate the
// window.navigator.onLine variable (it is not modifiable). It prevents
// the offline and online events to be triggered if the network
// connectivity is not changed
var IS_ONLINE = true;
function checkNetwork() {
$.ajax({
// Empty file in the root of your public vhost
url: ''/networkcheck.txt'',
// We don''t need to fetch the content (I think this can lower
// the server''s resources needed to send the HTTP response a bit)
type: ''HEAD'',
cache: false, // Needed for HEAD HTTP requests
timeout: 2000, // 2 seconds
success: function() {
if (!IS_ONLINE) { // If we were offline
IS_ONLINE = true; // We are now online
$(window).trigger(''online''); // Raise the online event
}
},
error: function(jqXHR) {
if (jqXHR.status == 0 && IS_ONLINE) {
// We were online and there is no more network connection
IS_ONLINE = false; // We are now offline
$(window).trigger(''offline''); // Raise the offline event
} else if (jqXHR.status != 0 && !IS_ONLINE) {
// All other errors (404, 500, etc) means that the server responded,
// which means that there are network connectivity
IS_ONLINE = true; // We are now online
$(window).trigger(''online''); // Raise the online event
}
}
});
}
Puedes usarlo así:
// Hack to use the checkNetwork() function only on Firefox
// (http://.com/questions/5698810/detect-firefox-browser-with-jquery/9238538#9238538)
// (But it may be too restrictive regarding other browser
// who does not properly support online / offline events)
if (!(window.mozInnerScreenX == null)) {
window.setInterval(checkNetwork, 30000); // Check the network every 30 seconds
}
Para escuchar los eventos en línea y sin conexión (con la ayuda de jQuery):
$(window).bind(''online offline'', function(e) {
if (!IS_ONLINE || !window.navigator.onLine) {
alert(''We have a situation here'');
} else {
alert(''Battlestation connected'');
}
});
En HTML5, puede usar la propiedad navigator.onLine . Mira aquí:
http://www.w3.org/TR/offline-webapps/#related
Probablemente su comportamiento actual sea aleatorio ya que javascript solo prepara la variable "navegador" y luego sabe si usted está fuera de línea y en línea, pero en realidad no verifica la conexión de red.
Háganos saber si esto es lo que está buscando.
Saludos cordiales,
Encuentre el módulo require.js que escribí para Offline.
define([''offline''], function (Offline) {
//Tested with Chrome and IE11 Latest Versions as of 20140412
//Offline.js - http://github.hubspot.com/offline/
//Offline.js is a library to automatically alert your users
//when they''ve lost internet connectivity, like Gmail.
//It captures AJAX requests which were made while the connection
//was down, and remakes them when it''s back up, so your app
//reacts perfectly.
//It has a number of beautiful themes and requires no configuration.
//Object that will be exposed to the outside world. (Revealing Module Pattern)
var OfflineDetector = {};
//Flag indicating current network status.
var isOffline = false;
//Configuration Options for Offline.js
Offline.options = {
checks: {
xhr: {
//By default Offline.js queries favicon.ico.
//Change this to hit a service that simply returns a 204.
url: ''favicon.ico''
}
},
checkOnLoad: true,
interceptRequests: true,
reconnect: true,
requests: true,
game: false
};
//Offline.js raises the ''up'' event when it is able to reach
//the server indicating that connection is up.
Offline.on(''up'', function () {
isOffline = false;
});
//Offline.js raises the ''down'' event when it is unable to reach
//the server indicating that connection is down.
Offline.on(''down'', function () {
isOffline = true;
});
//Expose Offline.js instance for outside world!
OfflineDetector.Offline = Offline;
//OfflineDetector.isOffline() method returns the current status.
OfflineDetector.isOffline = function () {
return isOffline;
};
//start() method contains functionality to repeatedly
//invoke check() method of Offline.js.
//This repeated call helps in detecting the status.
OfflineDetector.start = function () {
var checkOfflineStatus = function () {
Offline.check();
};
setInterval(checkOfflineStatus, 3000);
};
//Start OfflineDetector
OfflineDetector.start();
return OfflineDetector;
});
Por favor, lea esta publicación de blog y hágame saber sus pensamientos. http://zen-and-art-of-programming.blogspot.com/2014/04/html-5-offline-application-development.html Contiene un ejemplo de código que usa offline.js para detectar cuando el cliente está fuera de línea.
Hoy hay una biblioteca de código abierto de JavaScript que hace este trabajo: se llama Offline.js .
Muestra automáticamente la indicación en línea / fuera de línea a tus usuarios.
Asegúrese de revisar el README completo. Contiene eventos en los que puede enganchar.
Aquí hay una página de prueba . ¡Es hermoso / tiene una buena interfaz de usuario de comentarios por cierto! :)
Offline.js Simulate UI es un complemento Offline.js que le permite probar cómo responden sus páginas a diferentes estados de conectividad sin tener que usar métodos de fuerza bruta para deshabilitar su conectividad real.
La mejor manera que funciona ahora en todos los principales navegadores es el siguiente script:
(function () {
var displayOnlineStatus = document.getElementById("online-status"),
isOnline = function () {
displayOnlineStatus.innerHTML = "Online";
displayOnlineStatus.className = "online";
},
isOffline = function () {
displayOnlineStatus.innerHTML = "Offline";
displayOnlineStatus.className = "offline";
};
if (window.addEventListener) {
/*
Works well in Firefox and Opera with the
Work Offline option in the File menu.
Pulling the ethernet cable doesn''t seem to trigger it.
Later Google Chrome and Safari seem to trigger it well
*/
window.addEventListener("online", isOnline, false);
window.addEventListener("offline", isOffline, false);
}
else {
/*
Works in IE with the Work Offline option in the
File menu and pulling the ethernet cable
*/
document.body.ononline = isOnline;
document.body.onoffline = isOffline;
}
})();
Fuente: http://robertnyman.com/html5/offline/online-offline-events.html
Los principales proveedores de navegadores difieren en lo que significa "fuera de línea".
Chrome y Safari detectarán cuándo se "desconecta" automáticamente, lo que significa que los eventos y propiedades "en línea" se dispararán automáticamente cuando desenchufe el cable de red.
Firefox (Mozilla), Opera e IE adoptan un enfoque diferente y lo consideran "en línea" a menos que seleccione explícitamente el "Modo sin conexión" en el navegador, incluso si no tiene una conexión de red en funcionamiento.
Existen argumentos válidos para el comportamiento de Firefox / Mozilla, que se describen en los comentarios de este informe de errores:
https://bugzilla.mozilla.org/show_bug.cgi?id=654579
Pero, para responder a la pregunta, no puede confiar en los eventos / propiedades en línea / fuera de línea para detectar si realmente hay conectividad de red.
En cambio, debe usar enfoques alternativos.
La sección "Notas" de este artículo del Desarrollador de Mozilla proporciona enlaces a dos métodos alternativos:
https://developer.mozilla.org/en/Online_and_offline_events
"Si la API no está implementada en el navegador, puede usar otras señales para detectar si está fuera de línea, incluyendo escuchar los eventos de error de AppCache y las respuestas de XMLHttpRequest"
Esto enlaza con un ejemplo del enfoque de "escuchar los eventos de error de AppCache":
http://www.html5rocks.com/en/mobile/workingoffthegrid/#toc-appcache
... y un ejemplo del enfoque de "escucha de fallas de XMLHttpRequest":
http://www.html5rocks.com/en/mobile/workingoffthegrid/#toc-xml-http-request
HTH, - Chad
Los proveedores de navegadores no pueden ponerse de acuerdo sobre cómo definir fuera de línea. Algunos navegadores tienen una función Trabajar sin conexión, que consideran separada de la falta de acceso a la red, que a su vez es diferente al acceso a Internet. Todo el asunto es un desastre. Algunos proveedores de navegadores actualizan el indicador navigator.onLine cuando se pierde el acceso real a la red, otros no.
De la especificación:
Devuelve falso si el agente de usuario está definitivamente fuera de línea (desconectado de la red). Devuelve true si el agente de usuario puede estar en línea.
Los eventos en línea y fuera de línea se activan cuando cambia el valor de este atributo.
El atributo navigator.onLine debe devolver false si el agente de usuario no entrará en contacto con la red cuando el usuario sigue enlaces o cuando un script solicita una página remota (o sabe que dicho intento fallaría), y debe devolver true de lo contrario.
Finalmente, las notas de especificaciones:
Este atributo es intrínsecamente poco confiable. Una computadora puede conectarse a una red sin tener acceso a Internet.
Uso la opción FALLBACK en el manifiesto de caché de HTML5 para verificar si mi aplicación html5 está en línea o fuera de línea de la siguiente manera:
FALLBACK:
/online.txt /offline.txt
En la página html, uso javascript tot para leer los contenidos del archivo txt en línea / fuera de línea:
<script>$.get( "urlto/online.txt", function( data ) {
$( ".result" ).html( data );
alert( data );
});</script>
Cuando no está conectado, el script leerá los contenidos de offline.txt. Según el texto de los archivos, puede detectar si la página web está en línea fuera de línea.
bueno, puedes probar el plugin de javascript que puede monitorear la conexión del navegador en tiempo real y notifica al usuario si Internet o la conexión de los navegadores con Internet se cayeron.
El complemento de Wiremonkey Javascript y la demostración que puedes encontrar aquí
navigator.onLine es un desastre
Me enfrento a esto cuando trato de hacer una llamada ajax al servidor.
Hay varias situaciones posibles cuando el cliente está fuera de línea:
- los timouts de llamada ajax y recibe un error
- la llamada ajax devuelve éxito, pero el mensaje es nulo
- la llamada ajax no se ejecuta porque el navegador así lo decide (puede ser que cuando navigator.onLine se vuelva falso después de un tiempo)
La solución que estoy usando es controlar el estado yo mismo con javascript. Establecí la condición de una llamada exitosa, en cualquier otro caso, supongo que el cliente está fuera de línea. Algo como esto:
var offline;
pendingItems.push(item);//add another item for processing
updatePendingInterval = setInterval("tryUpdatePending()",30000);
tryUpdatePending();
function tryUpdatePending() {
offline = setTimeout("$(''#offline'').show()", 10000);
$.ajax({ data: JSON.stringify({ items: pendingItems }), url: "WebMethods.aspx/UpdatePendingItems", type: "POST", dataType: "json", contentType: "application/json; charset=utf-8",
success: function (msg) {
if ((!msg) || msg.d != "ok")
return;
pending = new Array(); //empty the pending array
$(''#offline'').hide();
clearTimeout(offline);
clearInterval(updatePendingInterval);
}
});
}
puedes detectar fácilmente la forma offline de navegadores cruzados como abajo
var randomValue = Math.floor((1 + Math.random()) * 0x10000)
$.ajax({
type: "HEAD",
url: "http://yoururl.com?rand=" + randomValue,
contentType: "application/json",
error: function(response) { return response.status == 0; },
success: function() { return true; }
});
puede reemplazar yoururl.com por document.location.pathname .
El quid de la solución es, intente conectarse a su nombre de dominio, si no puede conectarse, está fuera de línea. funciona en el navegador cruzado.
Usando el cuerpo del documento:
<body ononline="onlineConditions()" onoffline="offlineConditions()">(...)</body>
Usando el evento de Javascript:
window.addEventListener(''load'', function() {
function updateOnlineStatus(event) {
var condition = navigator.onLine ? "online" : "offline";
if( condition == ''online'' ){
console.log( ''condition: online'')
}else{
console.log( ''condition: offline'')
}
}
window.addEventListener(''online'', updateOnlineStatus(event) );
window.addEventListener(''offline'', updateOnlineStatus(event) );
});
Referencia :
Document-Body: evento on - line
Javascript-Event: eventos en línea y fuera de línea
Pensamientos Adicionales:
Enviar alrededor de "la conexión de red no es lo mismo que la conexión a Internet". Problema de los métodos anteriores: puede verificar la conexión a Internet una vez con ajax en el inicio de la aplicación y configurar un modo en línea / fuera de línea. Cree un botón de reconexión para que el usuario se conecte. Y añada a cada solicitud ajax fallada una función que impulsa al usuario nuevamente al modo fuera de línea.