Форум

thrasher · #1 (**permalink**) 05.06.2017, 01:20

Друзья, доброго времени суток. Очень нужна Ваша помощь. В JS не очень силен, поэтому прошу помочь людей более сведущих. Ситуация очень простая: имеется форма, которая при нажатии кнопки Send через form-submission-handler.zip отправляет данные, но перед отправкой должна проверять интернет соединение,и при отсутствии соединения не позволяло бы отправлять данные.

Пока есть такой скрипт, который расположен в html коде, но без offline.min.zip почему то не работает.
Ниже кусок html кода с кнопкой проверки интернета. Интернет проверяет корректно. Но очень нужно, чтобы проверяло непосредственно при отправке формы.
Заранее признателен за ответы, очень надеюсь на Вашу помощь.

<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 · #2 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript