仕事用の Web ページ キオスクを構築しています。コンピューターが起動すると、すぐにキオスクが読み込まれますが、ネットワークに接続するのに約 1 分かかります。ユーザーが最初に目にするのは接続エラーです。これは、キオスクがライブ ページにアクセスしようとしましたが、まだインターネットに接続されていないためです。キオスク ブラウザはChrome を使用します。
初期エラーを防ぐために、インターネット接続を確認し、接続が確立されるまで待機する、ローカルでホストされている Web ページを作成しようとしています。次に、ライブ ページにリダイレクトします。
これは、オフラインでローカルにホストされた最初のページです。ここからライブページにリダイレクトすることになっています。どうやら 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>