Лучший обзор При разработке мобильных приложений под всяческими фреймворками периодически встает вопрос о том, как с помощью JavaScript проверить, есть ли подключение к интернету. В самом простом случае доступность интернета проверяется через navigator.online, которое возвращает статус браузера, а фактически, есть ли какое-нибудь подключение. И в принципе, выдаст true, если есть подключение к wi-fi И к локальному роутеру.
За частую хотелось бы все таки больше информации. Пингануть, к примеру, google.com или сайт, к которому собираемся так или иначе подключиться. Но здесь нам мешает «CORS»: Cross-Origin Resource Sharing («совместное использование ресурсов между разными источниками»), по которой браузер обрежет такой запрос, если он не разрешен «на той стороне». А он фактически всегда запрещен.
В итоге, для себя я остановился на варианте ping (условно) через картинку. В простейшем случае, пингуем фавикон гугла.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Проверка доступности интернета</title>
</head>
<body>
<div id="plug">
Возможно, имеются какие-то проблемы с доступом к интернету
<input type="button" onclick="myFunction()" value="Проверить связь!">
</div>
<div id="plug1">
Где вайфай?
</div>
<script>
function myFunction () {
var imgg = new Image()
imgg.onload = () => {
// Здесь делаем что-то, что нужно сделать, если с интернетом все в порядке,
// к примеру заменяем "заглушку" на наш скрипт с другого сайта
plug = document.getElementById('plug');
plug.remove();
const myScript = document.createElement('script');
// myScriptr.src =
// или заменяем текст
plug1 = document.getElementById('plug1');
plug1.innerText = 'Ура. Связь есть';
}
try {
imgg.src = 'https://google.com/favicon.ico'
} catch {
// console.log('ошибка')
}
}
</script>
</body>
</html>
Можно повестить функцию на событие завершения загрузки документа или еще на какое…