[英]How to Check for an Initial Internet Connection in Chrome before loading a Web Page
我正在建立一个网络信息亭。 电脑启动并直接进入Chrome。 浏览器在建立网络连接之前加载,因此用户始终看到的第一件事是连接错误。
我正在尝试创建一个等待连接启动的初始本地托管网页,然后将页面重定向到网络上托管的实时网页。
我试过了:
navigator.onLine
但在Chrome中,这仅检查浏览器是否处于“在线模式”,而不是实际上是否存在有效连接。 结果是它总是重定向到没有连接的实时页面,并且用户得到连接错误。
我尝试过AJAX请求,但结果总是如此:
Access-Control-Allow-Origin不允许使用origin
http://localhost
我无法使用任何标志启动Chrome以禁用此功能。 它必须是Chrome的默认风格。
所以我的问题是:这个问题有解决方案吗? 我愿意使用Javascript / JQuery / PHP / HTML等任意组合。
这是我本地托管网页的代码:
<!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>
一个非常肮脏的黑客与JSONP和jquery
使用jsfiddle jsonp测试:
(function testConnection() {
setTimeout(testConnection, 2000);
$.getJSON("http://jsfiddle.net/echo/jsonp/?callback=redirect&cb=?");
})()
function redirect() {
window.location = 'http://www.google.com'; // REDIRECT TARGET
}
第一版:
(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
});
})()
按预期工作,您可能希望拥有自己的Web服务器,以便不依赖于特定的API
此行为旨在防止从localhost连接的恶意脚本,当然,当您尝试实现自助服务终端时,这只是一种痛苦。
我认为你需要做的是与这个相当不同的问题中的答案相同: Access-Control-Allow-Origin不允许使用Origin
Matt Mombrea建议这样的事情:
Access-Control-Allow-Origin: *
“这将允许跨域AJAX。在PHP中你需要像这样修改响应:”
<?php header('Access-Control-Allow-Origin: *'); ?>
然后,您可以轮询您控制的在线服务器,使用此访问控制权限进行响应,以查看您的互联网连接是否已启用。
否则,您可以使用localhost PHP服务器脚本尝试访问服务器,并让您的ajax localhost页面查询localhost脚本以获取答案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.