How to check an initial Internet connection to Chrome before loading a web page

I'm building a web kiosk. The computer boots and goes right into Chrome. The browser loads before a network connection is established, so the first thing a user always sees is a connection error.

I'm trying to make an initial, locally hosted webpage that waits for the connection to be up, then redirects the page to the live webpage hosted on the network.

I've tried:

navigator.onLine

But in Chrome this only checks if the browser is in 'online mode,' not if there is actually a working connection. The result is that it always redirects to the live page with no connection and the users get a connection error.

I've tried AJAX requests, but the result is always:

Origin http://localhost is not allowed by Access-Control-Allow-Origin

I can't boot Chrome with any flags to disable this. It has to be the default flavor of Chrome.

So my question: Is there a working solution to this problem? I am willing to use any combination of Javascript / JQuery / PHP / HTML , etc.

Here is the code for my locally hosted web page:

<!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
});
      function connect(){
      try{
        $.ajax({url:"http://intranet/webpage",
        statusCode: {
    200: function() {
      window.location.replace("http://live/webpage");
    }
  },
     error: function(e){
         console.log(e);
         setTimeout(connect, 5000);
     },
       dataType:"json"
   });
}catch(e){
     console.log(e);
    setTimeout(connect, 5000);
}
}
connect();
</script>
</body>
</html>


A quite dirty hack with JSONP and jquery

using jsfiddle jsonp test:

(function testConnection() {
  setTimeout(testConnection, 2000);
  $.getJSON("http://jsfiddle.net/echo/jsonp/?callback=redirect&cb=?");
})()

function redirect() {
   window.location = 'http://www.google.com'; // REDIRECT TARGET
}

first version:

(function testConnection() {
    setTimeout(testConnection, 2000);
    $.getJSON(
       "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
       {format:'json'}
    ).done(function(result){
        window.location = 'http://www.google.com'; // REDIRECT TARGET
    });
})()

Works as expected, you might wanna have your own your own web server in order not to rely on a specific API