3

仕事用の 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>
4

2 に答える 2

2

私はそれが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();
于 2013-03-20T19:13:23.227 に答える
0

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;
      }
    });
  } 
});
于 2013-03-20T19:20:14.760 に答える