Javascript 建立internet连接后重定向网页
我正在为工作建立一个网页亭。当计算机启动时，它会立即加载信息亭，但连接到网络大约需要一分钟。用户看到的第一件事是连接错误，因为信息亭试图访问实时页面，但还没有互联网。kiosk浏览器使用Chrome浏览器。 为了防止最初的错误，我尝试创建一个本地托管的网页，该网页检查internet连接，并等待连接建立。然后它重定向到live页面 这是最初的脱机本地托管页面。它应该从这里重定向到live页面。显然，在Chrome中，navigator.onLine只检查Chrome是否设置为“在线模式”，但实际上并不测试实时连接Javascript 建立internet连接后重定向网页,javascript,jquery,html,Javascript,Jquery,Html,我正在为工作建立一个网页亭。当计算机启动时，它会立即加载信息亭，但连接到网络大约需要一分钟。用户看到的第一件事是连接错误，因为信息亭试图访问实时页面，但还没有互联网。kiosk浏览器使用Chrome浏览器。 为了防止最初的错误，我尝试创建一个本地托管的网页，该网页检查internet连接，并等待连接建立。然后它重定向到live页面 这是最初的脱机本地托管页面。它应该从这里重定向到live页面。显然，在Chrome中，navigator.onLine只检查Chrome是否设置为“在线模式”，但实际
<!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>
小亭水花
信息亭正在建立与网络的连接。。。
$（“#dialog”）.dialog（{minWidth:1000}）；
$（“.ui对话框标题栏关闭”，this.parentNode）.hide（）；
$（“#进度条”）。宽度（800）；
$（“#progressbar”）.progressbar({
值：false
});
while（true）{
if（navigator.onLine）{
window.location.replace（“http://stackoverflow.com");
打破
}
}
navigator.onLine 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();
如果navigator.online不起作用，让我们手动执行此操作 一种可能性是通过查看是否可以ping服务器来检查连接。为此，设置一个尝试检索数据的ajax调用。如果它成功返回，则您已连接！然后可以重定向到新页面
$(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;
}
});
}
});
对于初学者，将
while（true）间隔，因为当前这将阻止UI响应。在<代码>窗口。addEventListener（“联机”，函数（e）{alert（“联机”）；}）