Как обнаружить Online / Offline Event Cross-браузер?
https://stackoverflow.com/questions/3181080
-
02-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я пытаюсь точно определить, когда браузер выходит в автономный режим, используя HTML5 онлайн и автономные события.
Вот мой код:
<script>
// FIREFOX
$(window).bind("online", applicationBackOnline);
$(window).bind("offline", applicationOffline);
//IE
window.onload = function() {
document.body.ononline = IeConnectionEvent;
document.body.onoffline = IeConnectionEvent;
}
</script>
Он отлично работает, когда я просто ударил «Работа в автономном режиме» на Firefox или IE, но это вроде случайно работает, когда я на самом деле отключающую провод.
Какой лучший способ обнаружить это изменение? Я хотел бы избежать повторяющихся вызовов AJAX с тайм-аутами.
Решение
Поставщики браузера не могут договориться о том, как определить оффлайн. Некоторые браузеры имеют работу в автономном режиме, которые они считают отдельно от недостатка доступа к сети, которое снова отличается от доступа в Интернет. Все это беспорядок. Некоторые продавцы браузера обновляют флаг Navigator.online, когда фактический доступ к сети теряется, другие нет.
Из спецификации:
Возвращает false, если пользовательский агент определенно в автономном режиме (отключен из сети). Возвращает true, если пользовательский агент может быть в сети.
События в Интернете и в автономном режиме выпускаются при изменении значения этого атрибута.
Атрибут Navigator.Online должен возвращать false, если пользовательский агент не свяжется с сетью, когда пользователь читает ссылку или когда скрипт запрашивает удаленную страницу (или знает, что такая попытка будет выполнен), и должна возвращать True иначе.
Наконец, спецификация примечания:
Этот атрибут по своей природе ненадежен. Компьютер может быть подключен к сети без доступа в Интернет.
Другие советы
Основные поставщики браузера отличаются тем, что означает «офлайн».
Chrome и Safari обнаружит, когда вы переходите «в автономном режиме» автоматически - означает, что «онлайн» события и свойства будут автоматически стрелять при отключении вашего сетевого кабеля.
Firefox (Mozilla), Opera и IE. Делайте другой подход, и считают вас «онлайн», если вы не выберете «автономный режим» в браузере - даже если у вас нет рабочего сетевого подключения.
Существуют действительные аргументы для поведения Firefox / Mozilla, которые изложены в комментариях этого отчета об ошибке:
https://bugzilla.mozilla.org/show_bug.cgi?id=654579.
Но, чтобы ответить на вопрос - вы не можете полагаться на онлайн / оффлайн события / свойство для обнаружения, если на самом деле есть сетевое подключение.
Вместо этого вы должны использовать альтернативные подходы.
Раздел «Примечания» этой статьи разработчика Mozilla предоставляет ссылки с двумя альтернативными методами:
https://developer.mozilla.org/en/online_and_offline_events.
«Если API не реализован в браузере, вы можете использовать другие сигналы для обнаружения, если вы в автономном режиме, включая прослушивание событий ошибок AppCache, и ответы от XMLHTTTPREQUEST»
Это ссылки на пример «Прослушивание для AppCache Ervices Events»:
http://www.html5rocks.com/en/mobile/workingoffthegrid/#toc-appcache.
... И пример «прослушивания к сбоям XMLHTTRECEST»:
http://www.html5rocks.com/en/mobile/workingoftoftegrid/#toc-xml-http-request
Х-е, - Чад
Сегодня есть библиотека JavaScript с открытым исходным кодом, которая делает эту работу: это называется Offline.js.
Автоматическое отображение онлайн / оффлайн-индикации ваших пользователей.
https://github.com/hubspot/offline.
Обязательно проверьте полный ПРОЧТИ МЕНЯ. Отказ Содержит события, в которые вы можете подключить.
Вот а тестовая страница. Отказ Это красиво / имеет хорошие отзывы, кстати! :)
Offline.js Simulation ui - это плагин Offline.js, который позволяет тестировать, как ваши страницы реагируют на разные состояния подключения без необходимости использовать методы Brute-Force для отключения фактического подключения.
Лучший способ, который сейчас работает на всех основных браузерах, является следующим сценарием:
(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;
}
})();
Источник: http://robertnyman.com/html5/offline/online-offline-events.html.
То window.navigator.onLine Атрибут и связанные с ними события в настоящее время ненадежны на определенные веб-браузеры (особенно Firefox Desktop) Как сказал @junto, поэтому я написал небольшую функцию (используя jQuery), который периодически проверяет состояние подключения к сети и поднять соответствующую offline и 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
}
}
});
}
Вы можете использовать это так:
// Hack to use the checkNetwork() function only on Firefox
// (http://stackoverflow.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
}
Прослушать в автономном режиме и онлайн-событиях (с помощью jQuery):
$(window).bind('online offline', function(e) {
if (!IS_ONLINE || !window.navigator.onLine) {
alert('We have a situation here');
} else {
alert('Battlestation connected');
}
});
С недавнего navigator.onLine Показывает то же самое на всех основных браузерах, и таким образом используется.
if (navigator.onLine) {
// do things that need connection
} else {
// do things that don't need connection
}
Самые старые версии, которые поддерживают это правильно: Firefox 41., То есть 9, Chrome 14 и Safari 5.
В настоящее время это будет представлять почти весь спектр пользователей, но вы всегда должны проверять, какие пользователи вашей страницы имеют возможности.
Предыдущая до FF 41, это только показать false Если пользователь поместит браузер вручную в автономном режиме. В IE 8 имущество было на body, вместо window.
источник: могу ли я использовать
Navigator.online - беспорядок
Я сталкиваюсь с этим, когда пытаясь сделать звонок Ajax на сервер.
Есть несколько возможных ситуаций, когда клиент вне форума:
- Вызывы вызовов AJAX и вы получите ошибку
- Вызов AJAX возвращает успех, но MSG NULL
- Вызов ajax не выполнен, потому что браузер решит так (может быть, это когда навигатор .online становится ложным через некоторое время)
Решение, которое я использую, это управлять статусом самостоятельно с помощью JavaScript. Я устанавливаю условие успешного вызова, в любом другом случае я предполагаю, что клиент вне форума. Что-то вроде этого:
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);
}
});
}
В HTML5 вы можете использовать navigator.onLine свойство. Смотри сюда:
http://www.w3.org/tr/offline-webapps/#Related
Вероятно, ваше текущее поведение является случайным, как JavaScript, только готовый переменную «браузер», а затем знает, если вы в автономном режиме и онлайн, но он на самом деле не проверяет сетевое соединение.
Дайте нам знать, если это то, что вы ищете.
С уважением,
Пожалуйста, найдите модуль require.js, который я написал для вне форума.
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;
});
Пожалуйста, прочитайте этот блог пост и дайте мне знать ваши мысли. http://zen-and-art-of-programming.blogspot.com/2014/04/html-5-offline-application-development.html. Он содержит образец кода с использованием Offline.js для обнаружения, когда клиент вне форума.
Вы можете обнаружить вне форума проходного браузера легко, как ниже
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; }
});
Вы можете заменить yoururl.com по document.location.pathname.
Суть решения - это, попробуйте подключиться к вашему доменному имени, если вы не можете подключиться - вы в автономном режиме. Работает Крест-браузер.
Я использую опцию Flaedback в Cheach Cache HTML5, чтобы проверить, будет ли приложение HTML5 онлайн или в автономном режиме:
FALLBACK:
/online.txt /offline.txt
На странице HTML я использую JavaScript TOT Прочитать содержимое файла TXT Online / Offline:
<script>$.get( "urlto/online.txt", function( data ) {
$( ".result" ).html( data );
alert( data );
});</script>
Когда в автономном режиме скрипт будет прочитать содержимое Offline.txt. На основании текста в файлах вы можете обнаружить, если веб-страница находится в автономном режиме.
Вот мое решение.
Испытано с IE Opera, Chrome, Firefox, Safari, как Phonegap WebApp на iOS 8 и как PhoneGap WebApp на Android 4.4.2
Это решение не работает с Firefox на 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'; ?>
Ну, вы можете попробовать плагин JavaScript, который может контролировать подключение браузера в режиме реального времени и уведомлять пользователя, если интернет или браузеры соединены с интернетом.
Wireonkey JavaScript плагини демо можно найти здесь
Использование кузова документа:
<body ononline="onlineConditions()" onoffline="offlineConditions()">(...)</body>
Использование события JavaScript:
window.addEventListener('load', function() {
function updateOnlineStatus() {
var condition = navigator.onLine ? "online" : "offline";
if( condition == 'online' ){
console.log( 'condition: online')
}else{
console.log( 'condition: offline')
}
}
window.addEventListener('online', updateOnlineStatus );
window.addEventListener('offline', updateOnlineStatus );
});
Справка:
Тело документа: Ononline событие
JavaScript-Event: Онлайн и офлайн события
Дополнительные мысли:
Для доставки вокруг «сетевого подключения не то же самое, что проблема с подключением к Интернету» из вышеупомянутых методов: вы можете проверить подключение к Интернету один раз с AJAX на начало приложения и настроить режим онлайн / автономного режима. Создайте кнопку Reconnect для пользователя, чтобы выйти в Интернет. И добавьте на каждую неудачную AJAX запросить функцию, которая запинает пользователь обратно в автономный режим.
