How to Check for an Initial Internet Connection in Chrome before loading a Web Page
Question
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://localhostis 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>
2 answers
solution1
2 ACCPTED 2013-03-21 16:27:42
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
solution2
0 2013-03-21 16:21:13
This behavior is intended to protect from a malicious script connecting from localhost, of course when you are trying to implement a kiosk this is just a pain.
I THINK what you need to do is the same as the answer in this rather different question: Origin is not allowed by Access-Control-Allow-Origin
Matt Mombrea suggests something like this:
Access-Control-Allow-Origin: *
"This will allow cross domain AJAX. In PHP you'll want to modify the response like so:"
<?php header('Access-Control-Allow-Origin: *'); ?>
You can then poll the online server you control that responds with this access control allowance to see if your internet connection is on yet.
Otherwise you could use a localhost PHP server script to try to access a server, and have your ajax localhost page query the localhost script for the answer.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.