Check device internet connection every minute with jquery mobile

Question

Internet connectivity is checked every minute page was created. However when wifi is off on device the page is redirected to no_internet.hmtl page. How can we check internet connectivity every time the wifi button is on/off the page should redirect to no_internet.html

$(document).on('pagebeforecreate', '[data-role="page"]', function(){      //loading spinner

    setInterval(
        function(){


          if(window.navigator.onLine){ 

            }else {

                 window.location='./no_internet.html';

                 return false;

            }

     }, 1000);

        setTimeout(function(){

         $.mobile.loading('show', {
        text: 'Chargement en cours...',
        textVisible: true,
        theme: 'a',
        html: "<span class='ui-bar ui-overlay-c ui-corner-all' ><img width='50px' height='50px' src='http://www.shougun.it/images/loading.gif' /><br><h2>Chargement en cours...</h2></span>"
    });
        },5);    

    });

Answer 1

  var interval=setInterval(function(){ 
        connectionExist(); // function returns a true if an internet connection exists
    }, 1000);

    function connectionExist() {
        var xhr = new XMLHttpRequest();
        var file = "http://localhost:50041/stackflow/icon1.png"; //URL we specify is the path to the file that we want to check on
        var randomNum = Math.round(Math.random() * 10000);

        xhr.open('HEAD', file + "?rand=" + randomNum, false);

        try {
            xhr.send();

            if (xhr.status >= 200 && xhr.status < 304) {
                console.log('Connected');
                return true;
            } else {
                console.log('Connection Exist');
                clearInterval(interval);
                window.location.href = "http://localhost:50041/stackflow/noInternet.html";
                return false;
            }
        } catch (e) {
            return false;
        }
    }