221

jQueryを使用してインターネット接続があるかどうかをどのように確認しますか？そうすれば、「インターネット接続に応じて、本番環境ではGoogleキャッシュバージョンのJQueryを使用し、開発中はそのバージョンまたはローカルバージョンを使用する」という条件を設定できます。

4

9 に答える 9

271

特定のケースに最適なオプションは次のとおりです。

</body>終了タグの直前：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

問題がjQueryに集中していることを考えると、これはおそらく最も簡単な方法です。

より堅牢なソリューションが必要な場合は、次のことを試すことができます。

var online = navigator.onLine;

オフラインWebアプリに関するW3Cの仕様の詳細をお読みください。ただし、これは最新のWebブラウザーで最適に機能することに注意してください。古いWebブラウザーでこれを行うと、期待どおりに機能しないか、まったく機能しない場合があります。

あるいは、自分のサーバーへのXHRリクエストは、接続をテストするための方法としてはそれほど悪くありません。他の回答の1つが、XHRの障害点が多すぎることを示していることを考えると、接続を確立するときにXHRに欠陥があると、とにかく日常の使用中にも欠陥が発生します。何らかの理由でサイトにアクセスできない場合、同じサーバーで実行されている他のサービスにもアクセスできない可能性があります。その決定はあなた次第です。

他の誰かのサービス、さらにはgoogle.comにXHRリクエストを送信することはお勧めしません。サーバーにリクエストを送信するか、まったくリクエストしないでください。

「オンライン」とはどういう意味ですか？

「オンライン」とはどういう意味か、混乱しているようです。インターネットは一連のネットワークであると考えてください。ただし、「大規模」なインターネットやワールドワイドウェブにアクセスできないVPNを使用している場合もあります。多くの場合、企業は他の外部ネットワークへの接続が制限されている独自のネットワークを持っているため、「オンライン」と見なすことができます。オンラインであるということは、ネットワークに接続していることだけを意味し、接続しようとしているサービスの可用性や到達可能性は意味しません。

ネットワークからホストに到達できるかどうかを判断するには、次のようにします。

function hostReachable() {

  // Handle IE and more capable browsers
  var xhr = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" );

  // Open new request as a HEAD to the root hostname with a random param to bust the cache
  xhr.open( "HEAD", "//" + window.location.hostname + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000), false );

  // Issue request and handle response
  try {
    xhr.send();
    return ( xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304) );
  } catch (error) {
    return false;
  }

}

そのための要点はここでも見つけることができます：https ：//gist.github.com/jpsilvashy/5725579

ローカル実装の詳細

「私はいつも間違って返されている」とコメントする人もいます。これは、おそらくローカルサーバーでテストしているためです。リクエストを行うサーバーが何であれ、HEADリクエストに応答できる必要があります。もちろん、必要に応じてGETに変更できます。

于 2010-03-05T02:40:43.890 に答える
41

さて、ゲームの少し遅いかもしれませんが、オンライン画像で確認するのはどうですか？つまり、OPはGoogle CMDまたはローカルJQコピーを取得する必要があるかどうかを知る必要がありますが、それはブラウザが何があってもJavascriptを読み取れないという意味ではありません。

<script>
function doConnectFunction() {
// Grab the GOOGLE CMD
}
function doNotConnectFunction() {
// Grab the LOCAL JQ
}

var i = new Image();
i.onload = doConnectFunction;
i.onerror = doNotConnectFunction;
// CHANGE IMAGE URL TO ANY IMAGE YOU KNOW IS LIVE
i.src = 'http://gfx2.hotmail.com/mail/uxp/w4/m4/pr014/h/s7.png?d=' + escape(Date());
// escape(Date()) is necessary to override possibility of image coming from cache
</script>

ちょうど私の2セント

于 2010-11-09T22:43:24.630 に答える
15

5年後-バージョン：

今日、このページで説明されているさまざまな方法の要点を知りたくない場合は、JSライブラリがあります。

これらのうちの1つはhttps://github.com/hubspot/offlineです。事前定義されたURI（デフォルトではファビコン）の接続性をチェックします。ユーザーの接続が再確立されたことを自動的に検出し、UIを更新するためにバインドできるupやなどのきちんとしたイベントを提供します。down

于 2010-03-05T02:31:50.590 に答える
6

Pingコマンドを模倣できます。

Ajaxを使用して自分のサーバーにタイムスタンプを要求し、setTimeoutを使用してタイマーを5秒に定義します。応答がない場合は、再試行します。

4回試行しても応答がない場合は、インターネットがダウンしていると考えられます。

したがって、このルーチンを使用して、1分または3分などの定期的な間隔で確認できます。

それは私にとって良い、そしてきれいな解決策のようです。

于 2012-01-21T16:28:16.027 に答える
1

XHRリクエストを数回送信して試すことができます。エラーが発生した場合は、インターネット接続に問題があることを意味します。

于 2010-03-05T02:27:47.057 に答える
0

これを行うためのjQueryプラグインを作成しました。デフォルトでは、現在のURLをチェックします（Webからすでに一度ロードされているため）。または、引数として使用するURLを指定できます。Googleへのリクエストを常に行うことは、さまざまな国でさまざまな時期にブロックされるため、最善のアイデアではありません。また、あなたは特定の海/前線/政治的気候を横切るつながりがその日のようであるかもしれないことに翻弄されるかもしれません。

http://tomriley.net/blog/archives/111

于 2012-05-25T18:51:04.713 に答える
-3

私はインターネット接続が存在するかどうかをチェックするためにここで働く解決策を持っています：

$.ajax({
    url: "http://www.google.com",
    context: document.body,
    error: function(jqXHR, exception) {
        alert('Offline')
    },
    success: function() {
        alert('Online')
    }
})
于 2014-01-30T15:16:25.733 に答える
-4

その特定のサーバーがダウンしていると失敗する可能性があるため、XHRリクエストの送信は良くありません。代わりに、googles APIライブラリを使用して、キャッシュされたバージョンのjQueryをロードします。

googles APIを使用して、jQueryの読み込み後にコールバックを実行できます。これにより、jQueryが正常に読み込まれたかどうかが確認されます。以下のコードのようなものが機能するはずです：

<script type="text/javascript">
    google.load("jquery");

    // Call this function when the page has been loaded
    function test_connection() {
        if($){
            //jQuery WAS loaded.
        } else {
            //jQuery failed to load.  Grab the local copy.
        }
    }
    google.setOnLoadCallback(test_connection);
</script>

googleAPIのドキュメントはここにあります。

于 2010-03-05T02:32:19.773 に答える
-5

はるかに簡単な解決策：

<script language="javascript" src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>

そして後でコードで：

var online;
// check whether this function works (online only)
try {
  var x = google.maps.MapTypeId.TERRAIN;
  online = true;
} catch (e) {
  online = false;
}
console.log(online);

オンラインでない場合、グーグルスクリプトはロードされないため、例外がスローされるエラーが発生します。

于 2013-07-17T19:06:48.280 に答える