Проверьте, существует ли интернет-соединение с Javascript?

Ответ 1

Лучший вариант для вашего конкретного случая:

Перед тегом close </body>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

Это, вероятно, самый простой способ, когда ваша проблема сосредоточена вокруг jQuery.

Если вы хотите получить более надежное решение, вы можете попробовать:

var online = navigator.onLine;

Подробнее о спецификации W3C для оффлайновых веб-приложений, однако имейте в виду, что это будет работать лучше всего в современных веб-браузерах, делая это со старыми веб-браузеры могут работать не так, как ожидалось, или вообще.

В качестве альтернативы, запрос XHR на ваш собственный сервер не так уж плохо для метода проверки вашей возможности подключения. Рассмотрение одного из других ответов говорит о том, что слишком много точек сбоя для XHR, если ваш XHR ошибочен при установлении его соединения, тогда он также будет испорчен во время рутинного использования. Если ваш сайт недоступен по какой-либо причине, ваши другие службы, работающие на одних и тех же серверах, скорее всего, будут недоступны. Это решение зависит от вас.

Я бы не стал рекомендовать XHR-запрос кому-то другому, даже google.com. Сделайте запрос на ваш сервер или вообще не выполните.

Что значит быть "онлайн" ?

Кажется, что существует некоторая путаница вокруг того, что означает "онлайн" . Учтите, что Интернет - это сеть, но иногда вы находитесь в VPN, без доступа к Интернету "по большому счету" или по всему миру. Часто у компаний есть свои сети, которые имеют ограниченную связь с другими внешними сетями, поэтому вы можете считаться "онлайн" . Быть онлайн связано только с тем, что вы подключены к сети, а не к доступности и недоступности сервисов, к которым вы пытаетесь подключиться.

Чтобы определить, доступен ли хост из вашей сети, вы можете сделать это:

function hostReachable() {

  // Handle IE and more capable browsers
  var xhr = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" );
  var status;

  // Open new request as a HEAD to the root hostname with a random param to bust the cache
  xhr.open( "HEAD", "//" + window.location.hostname + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000), false );

  // Issue request and handle response
  try {
    xhr.send();
    return ( xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304) );
  } catch (error) {
    return false;
  }

}

Вы также можете найти Gist для этого здесь: https://gist.github.com/jpsilvashy/5725579

Сведения о локальной реализации

Некоторые люди прокомментировали: "Я всегда получаю ложное". Это потому, что вы, вероятно, проверяете это на своем локальном сервере. Независимо от того, на каком сервере вы отправляете запрос, вам нужно будет ответить на запрос HEAD, который, конечно, может быть изменен на GET, если вы хотите.

Ответ 2

Хорошо, может быть, немного поздно в игре, но как насчет проверки с помощью онлайн-изображения? Я имею в виду, что ОР должен знать, нужно ли ему захватить CMD Google или локальную копию JQ, но это не значит, что браузер не может читать Javascript независимо от того, что, правильно?

<script>
function doConnectFunction() {
// Grab the GOOGLE CMD
}
function doNotConnectFunction() {
// Grab the LOCAL JQ
}

var i = new Image();
i.onload = doConnectFunction;
i.onerror = doNotConnectFunction;
// CHANGE IMAGE URL TO ANY IMAGE YOU KNOW IS LIVE
i.src = 'http://gfx2.hotmail.com/mail/uxp/w4/m4/pr014/h/s7.png?d=' + escape(Date());
// escape(Date()) is necessary to override possibility of image coming from cache
</script>

Только мои 2 цента

Ответ 3

5 лет спустя-версия:

Сегодня для вас есть JS-библиотеки, если вы не хотите вникать в мелочи разных методов, описанных на этой странице.

Из них https://github.com/hubspot/offline. Он проверяет подключение предопределенного URI, по умолчанию ваш значок. Он автоматически обнаруживает, когда пользовательская связь была восстановлена, и обеспечивает опрятные события, такие как up и down, с которыми вы можете привязываться, чтобы обновить свой интерфейс.

Ответ 4

Вы можете имитировать команду Ping.

Используйте Ajax для запроса метки времени на свой собственный сервер, определите таймер, используя setTimeout, до 5 секунд, если нет ответа, который он попробует еще раз.

Если в 4 попытках нет ответа, вы можете предположить, что интернет не работает.

Таким образом, вы можете проверить эту процедуру через равные промежутки времени, например, 1 или 3 минуты.

Это кажется хорошим и чистым решением для меня.

Ответ 5

Вы можете попробовать, отправив XHR-запросы несколько раз, а затем, если вы получите ошибки, это означает наличие проблемы с подключением к Интернету.

Изменить: Я нашел этот JQuery script, который делает то, что вы просите, Я не тестировал его.

Ответ 6

Я написал плагин jQuery для этого. По умолчанию он проверяет текущий URL (поскольку тот уже загружен один раз из Интернета), или вы можете указать URL-адрес для использования в качестве аргумента. Всегда делать запрос в Google - это не самая лучшая идея, потому что она блокируется в разных странах в разное время. Кроме того, вы можете быть во власти того, что может быть связано с конкретным видом на океан/погода/политический климат в этот день.

http://tomriley.net/blog/archives/111

Ответ 7

У меня есть решение, которое работает здесь, чтобы проверить, существует ли интернет-соединение:

$.ajax({
    url: "http://www.google.com",
    context: document.body,
    error: function(jqXHR, exception) {
        alert('Offline')
    },
    success: function() {
        alert('Online')
    }
})

Ответ 8

Отправка запросов XHR является плохим, потому что он может выйти из строя, если этот конкретный сервер не работает. Вместо этого используйте библиотеку API googles для загрузки их кешированных версий jQuery.

Вы можете использовать API googles для выполнения обратного вызова после загрузки jQuery, и это проверит, успешно ли загружен jQuery. Что-то вроде кода ниже должно работать:

<script type="text/javascript">
    google.load("jquery");

    // Call this function when the page has been loaded
    function test_connection() {
        if($){
            //jQuery WAS loaded.
        } else {
            //jQuery failed to load.  Grab the local copy.
        }
    }
    google.setOnLoadCallback(test_connection);
</script>

Документацию по API Google можно найти здесь.

Ответ 9

Более простое решение:

<script language="javascript" src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>

а затем в коде:

var online;
// check whether this function works (online only)
try {
  var x = google.maps.MapTypeId.TERRAIN;
  online = true;
} catch (e) {
  online = false;
}
console.log(online);

Когда он не подключен к сети, google script не будет загружен, что приведет к ошибке, в которой будет выбрано исключение.