title: Redirect web page once an internet connection is established
body: <p>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 <strong>Chrome.</strong></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Kiosk Splash&lt;/title&gt;
    &lt;link rel=stylesheet type="text/css" href="jquery/css/ui-lightness/jquery-ui-1.10.2.custom.css"&gt;
    &lt;script src="jquery/js/jquery-1.9.1.js"&gt;&lt;/script&gt;
    &lt;script src="jquery/js/jquery-ui-1.10.2.custom.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="dialog" style="text-align:center;"&gt;
      &lt;p&gt;
          &lt;font font face="verdana" size="5"&gt;The Kiosk is establishing a connection to the network...&lt;/font&gt;
      &lt;/p&gt;
      &lt;div id="progressbar" style="width: 50%; margin: 0 auto;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
  $( "#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;
      }
  }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>