3

私はウェブキオスクを構築しています。コンピューターが起動し、Chrome が起動します。ブラウザーはネットワーク接続が確立される前に読み込まれるため、ユーザーが常に最初に目にするのは接続エラーです。

接続が確立されるのを待ってから、ネットワーク上でホストされているライブ Web ページにページをリダイレクトする、ローカルでホストされている最初の Web ページを作成しようとしています。

私はもう試した：

navigator.onLine

しかし Chrome では、これはブラウザが「オンライン モード」であるかどうかのみをチェックし、実際に接続が機能しているかどうかはチェックしません。その結果、常に接続なしでライブ ページにリダイレクトされ、ユーザーに接続エラーが発生します。

AJAX リクエストを試してみましたが、結果は常に次のようになります。

オリジンhttp://localhostは Access-Control-Allow-Origin によって許可されていません

これを無効にするフラグを指定してChromeを起動することはできません。Chrome のデフォルトのフレーバーでなければなりません。

だから私の質問: この問題に対する実用的な解決策はありますか? Javascript / JQuery / PHP / HTML などの任意の組み合わせを使用したいと考えています。

ローカルでホストされている Web ページのコードは次のとおりです。

<!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>
4

2 に答える 2

2

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
    });
})()

期待どおりに動作します。特定の API に依存しないように、独自の Web サーバーが必要になる場合があります。

于 2013-03-21T16:27:42.577 に答える
0

この動作は、localhost から接続する悪意のあるスクリプトから保護することを目的としています。もちろん、キオスクを実装しようとしている場合、これはただの苦痛です。

あなたがする必要があることは、このかなり異なる質問の答えと同じだと思います: Origin is not allowed by Access-Control-Allow-Origin

Matt Mombrea は次のような提案をしています。

Access-Control-Allow-Origin: *

「これにより、クロスドメイン AJAX が可能になります。PHP では、次のように応答を変更する必要があります。」

<?php header('Access-Control-Allow-Origin: *'); ?>

次に、このアクセス制御許可で応答する制御しているオンライン サーバーをポーリングして、インターネット接続がまだオンになっているかどうかを確認できます。

それ以外の場合は、localhost PHP サーバー スクリプトを使用してサーバーにアクセスし、ajax localhost ページで localhost スクリプトにクエリを実行して回答を得ることができます。

于 2013-03-21T16:21:13.477 に答える