Check internet connection on Submit
Вложений: 2
Друзья, доброго времени суток. Очень нужна Ваша помощь. В JS не очень силен, поэтому прошу помочь людей более сведущих. Ситуация очень простая: имеется форма, которая при нажатии кнопки Send через Вложение 3532 отправляет данные, но перед отправкой должна проверять интернет соединение,и при отсутствии соединения не позволяло бы отправлять данные.
Пока есть такой скрипт, который расположен в html коде, но без Вложение 3531 почему то не работает. Ниже кусок html кода с кнопкой проверки интернета. Интернет проверяет корректно. Но очень нужно, чтобы проверяло непосредственно при отправке формы. Заранее признателен за ответы, очень надеюсь на Вашу помощь.:help: :thanks: <script src="offline.min.js"></script> <h2> <div id="status">Connection is:</div></h2> <button class="button-success pure-button button-xlarge" onclick="getData()" > Check connection</button> </div> <script> // Set our options for the Offline detection library Offline.options = { checkOnLoad: true, checks: { image: { url: function() { return 'https://developer.android.com/studio/images/studio-icon_2x.png?_=' + (Math.floor(Math.random() * 1000000000)); } }, active: 'image' } } Offline.on('up', internetUp); Offline.on('down',internetDown); var statusDiv = document.getElementById("status"); statusDiv.innerHTML = "Connection is: " + Offline.state; function getData() { // See if internet is up or down Offline.check(); switch (Offline.state) { case "up": // If the internet is up go ahead and retrieve data. getFeed(function(success,response){ if(success){ alert(response); } }) break; case "down": alert("DOWN"); break; } } function getFeed(callback) { var req = new XMLHttpRequest(); req.open("GET", "http://tmservices1.esri.com/arcgis/rest/services/LiveFeeds/Earthquakes/MapServer?f=pjson"); req.onload = function() { if (req.status === 200 && req.responseText !== "") { callback(true,req.responseText); } else { console.log("Attempt to retrieve feed failed."); callback(false,null); } }; req.send(null); } function internetUp(){ console.log("Internet is up."); statusDiv.innerHTML = "Connection is: up"; } function internetDown(){ console.log("Internet is down."); statusDiv.innerHTML = "Connection is: down"; } </script> Кнопка Send <button class="button-success pure-button button-xlarge"> <i class=""></i> Send</button> <script data-cfasync="false" type="text/javascript" src="form-submission-handler.js"></script> |
Для того чтобы узнать, есть подключение к Интернету или нет можно использовать navigator.onLine
alert( navigator.onLine ? "Интернет подключен" : "Интернет не подключен" ); Или же можно попытаться качать какой-нибудь ресурс, и если это удалось, то с подключением всё в порядке. fetch("", { method: "HEAD" }) .then(() => true, () => false) .then(onLine => alert( onLine ? "Интернет подключен" : "Интернет не подключен" ) ); Что же касается изменения подключения (проблемы со связью — сами отключили или кот, едете и перестало ловить и т. д.), то для этого есть события online и offline. <html><body><script> { let checkConnection = event => { let status = event.type; document.body.style.backgroundColor = ({ "offline": "#ffdddd", "online": "#ddffdd" })[status]; }; addEventListener("online", checkConnection); addEventListener("offline", checkConnection); checkConnection(new Event(navigator.onLine ? "online" : "offline")); }; </script></body></html> |
Часовой пояс GMT +3, время: 05:43. |