CODEWITHSUNDEEP
javascriptjqueryhtml
Taj G
Taj G

Reputation: 393

Redirect web page once an internet connection is established

I'm building a web page kiosk for work. When the computer boots, it immediately loads the kiosk, but it takes about a minute to connect to the network. The first thing a user sees is a connection error, because the kiosk tries to visit the live page, but there is no internet yet. The kiosk browser uses Chrome.

To prevent the initial error, I am trying to make a locally hosted web page that checks for an internet connection and waits until one is established. Then it redirects to the live page.

Here is the initial offline locally hosted page. It is supposed to redirect from here to the live page. Apparently in Chrome, navigator.onLine only checks if Chrome is set to 'online mode' but doesn't actually test a live connection.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Kiosk Splash</title>
  <link rel=stylesheet type="text/css" href="jquery/css/ui-lightness/jquery-ui-1.10.2.custom.css">
  <script src="jquery/js/jquery-1.9.1.js"></script>
  <script src="jquery/js/jquery-ui-1.10.2.custom.js"></script>
</head>
<body>
<div id="dialog" style="text-align:center;">
    <p>
        <font font face="verdana" size="5">The Kiosk is establishing a connection to the network...</font>
    </p>
    <div id="progressbar" style="width: 50%; margin: 0 auto;"></div>
</div>
<script>
$( "#dialog" ).dialog({ minWidth: 1000 });
$(".ui-dialog-titlebar-close", this.parentNode).hide();
$( "#progressbar" ).width(800);
$( "#progressbar" ).progressbar({
  value: false
});
while(true){
    if(navigator.onLine){
        window.location.replace("http://stackoverflow.com");
        break;
    }
}
</script>
</body>
</html>

Upvotes: 3

Views: 3096

Answers (2)

Anoop
Anoop

Reputation: 23208

I am not aware of navigator.onLine how it works. but it should try to connect to server and keep trying till it get connected to server. after connection redirect 

      function connect(){
      try{
        $.ajax({url:"http://itunes.apple.com/search?term=metallica", // any url which return json
        success: function(){
        location.href = "http://google.com"  
     },
     error: function(e){
         location.href = "http://google.com";
     }, 
       dataType:"json"
   });
}catch(e){
     console.log(e);         
    setTimeout(connect, 5000);
}
} 
connect();

Upvotes: 2

Danwilliger
Danwilliger

Reputation: 1241

If navigator.online is not working let's do this manually.

A possibility is to check the connection by seeing if you can ping your server. To do this set up an ajax call that tries to retrieve data. If it comes back successful, then you are connected! Then you can redirect to the new page.

$(function() {
  var myVar=setInterval(function(){ pingServer(); }, 1000),
      urlOnServer = "http://www.google.com",
      urlOfHomePage = "http://www.yahoo.com";

  function pingServer() {
    $.ajax({
      url: urlOnServer,
      data: null,
      dataType: 'json',
      success: function(result) {
        window.location = urlOfHomePage;
      }
    });
  } 
});

Upvotes: 0

Related Questions