Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Check internet connection on Submit (https://javascript.ru/forum/dom-window/69193-check-internet-connection-submit.html)

thrasher 05.06.2017 01:20

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()" >
&nbsp;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>&nbsp;Send</button>
  <script data-cfasync="false" type="text/javascript"
    src="form-submission-handler.js"></script>

Malleys 10.06.2017 00:33

Для того чтобы узнать, есть подключение к Интернету или нет можно использовать 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.