314

JavaScriptでインターネット接続がオフラインであることを検出する方法は?

4

22 に答える 22

152

失敗した XHR 要求を行うことで、接続が失われたと判断できます。

標準的なアプローチは、リクエストを数回再試行することです。通過しない場合は、ユーザーに接続を確認するよう警告し、正常に失敗します。

補足:アプリケーション全体を「オフライン」状態にすると、エラーが発生しやすい多くの処理状態の作業につながる可能性があります..ワイヤレス接続が行き来する可能性があるなど.接続の問題があれば最終的に修正し、かなりの寛容をもってアプリを使い続けることができます。

補足: Google のような信頼できるサイトで接続を確認することもできますが、Google は利用できるかもしれませんが、独自のアプリケーションは利用できない可能性があり、あなたはまだ独自の接続の問題を処理する必要があります。インターネット接続自体がダウンしていることを確認するには、Google に ping を送信してみてください。

補足: Ping の送信は、あらゆる種類の双方向 ajax リクエストを行うのと同じ方法で実現できますが、この場合、Google に ping を送信すると、いくつかの問題が発生します。まず、Ajax 通信を行う際に通常遭遇するのと同じクロスドメインの問題が発生します。1 つのオプションは、サーバー側のプロキシを設定することです。この場合、実際にpingGoogle (または任意のサイト) を検索し、ping の結果をアプリに返します。これはキャッチ22ですインターネット接続が実際に問題である場合、サーバーにアクセスできず、接続の問題が自分のドメインだけにある場合は、違いを見分けることができないためです. たとえば、google.com を指すページに iframe を埋め込み、その iframe をポーリングして成功/失敗 (コンテンツの調査など) を確認するなど、他のクロスドメイン手法を試すことができます。何が起こっているのかについて良い結論を引き出すためには、通信メカニズムからの有用な応答が必要なので、画像を埋め込んでも実際には何もわかりません。繰り返しますが、インターネット接続全体の状態を判断することは、価値があるよりも面倒な場合があります。特定のアプリに対してこれらのオプションを重視する必要があります。

于 2008-10-09T22:28:01.693 に答える
58

IE 8 はwindow.navigator.onLineプロパティをサポートします。

もちろん、それは他のブラウザーやオペレーティング システムでは役に立ちません。Ajax アプリケーションでオンライン/オフラインの状態を把握することの重要性を考えると、他のブラウザー ベンダーも同様にそのプロパティを提供することを決定するだろうと私は予測しています。

それが実現するまでは、XHR またはImage()or<img>リクエストのいずれかで、必要な機能に近いものを提供できます。

更新 (2014/11/16)

現在、主要なブラウザはこのプロパティをサポートしていますが、結果はさまざまです。

Mozilla ドキュメントからの引用:

Chrome および Safari では、ブラウザーがローカル エリア ネットワーク (LAN) またはルーターに接続できない場合、ブラウザーはオフラインです。他のすべての条件は戻りtrueます。したがって、ブラウザーが値を返すときにブラウザーがオフラインであるとfalse想定することはできますが、真の値がブラウザーがインターネットにアクセスできることを必ずしも意味するとは想定できません。コンピューターが常に「接続」されている仮想イーサネット アダプターを持つ仮想化ソフトウェアを実行している場合など、誤検知が発生する可能性があります。したがって、本当にブラウザのオンライン ステータスを確認したい場合は、確認するための追加手段を開発する必要があります。

Firefox および Internet Explorer では、ブラウザーをオフライン モードに切り替えると、false値が送信されます。他のすべての条件は値を返しtrueます。

于 2008-10-09T22:33:40.777 に答える
39 
 if(navigator.onLine){
  alert('online');
 } else {
  alert('offline');
 }
于 2011-04-06T17:54:02.993 に答える
39

これを行うにはいくつかの方法があります。

  • 独自の Web サイトへの AJAX 要求。その要求が失敗した場合は、接続に問題がある可能性が高くなります。JQueryのドキュメントには、失敗した AJAX リクエストの処理に関するセクションがあります。これを行うときは、同じオリジン ポリシーに注意してください。これにより、ドメイン外のサイトにアクセスできなくなる可能性があります。
  • のようonerrorに をに入れることができます。img<img src="http://www.example.com/singlepixel.gif" onerror="alert('Connection dead');" />

この方法は、ソース イメージが移動または名前変更された場合にも失敗する可能性があり、一般的に ajax オプションより劣る選択となります。

したがって、これを検出するにはいくつかの方法がありますが、完全なものはありませんが、ブラウザのサンドボックスから飛び出してユーザーのネット接続ステータスに直接アクセスする機能がない場合は、それらが最良のオプションのようです.

于 2008-10-09T22:32:14.787 に答える
14

olliej が言ったように、navigator.onLineネットワーク リクエストを送信するよりも browser プロパティを使用する方が望ましいため、developer.mozilla.org/En/Online_and_offline_eventsにより、古いバージョンの Firefox と IE でもサポートされています。

最近、変更に対応する必要がある場合に備えて、WHATWG はonlineおよびイベントの追加を指定しました。offlinenavigator.onLine

また、Daniel Silveira によって投稿されたリンクにも注意してください。サーバーとの同期のためにこれらのシグナル/プロパティに依存することは必ずしも良い考えではないことを指摘しています。

于 2009-08-20T21:54:08.003 に答える
12

リクエストが失敗した場合に起動する$.ajax()のコールバックを使用できます。error文字列「タイムアウト」に等しい場合textStatus、おそらく接続が切断されていることを意味します。

function (XMLHttpRequest, textStatus, errorThrown) {
  // typically only one of textStatus or errorThrown 
  // will have info
  this; // the options for this ajax request
}

ドキュメントから：

Error : リクエストが失敗した場合に呼び出される関数。この関数には 3 つの引数が渡されます。XMLHttpRequest オブジェクト、発生したエラーの種類を説明する文字列、およびオプションの例外オブジェクト (発生した場合) です。2 番目の引数 (null 以外) に指定できる値は、"timeout"、"error"、"notmodified"、および "parsererror" です。これは Ajax イベントです

たとえば、次のようになります。

 $.ajax({
   type: "GET",
   url: "keepalive.php",
   success: function(msg){
     alert("Connection active!")
   },
   error: function(XMLHttpRequest, textStatus, errorThrown) {
       if(textStatus == 'timeout') {
           alert('Connection seems dead!');
       }
   }
 });
于 2009-06-14T12:12:13.797 に答える
10

HTML5 アプリケーション キャッシュ API は navigator.onLine を指定します。これは現在 IE8 ベータ版、WebKit (例: Safari) ナイトリーで利用可能であり、Firefox 3 で既にサポートされています。

于 2008-10-09T23:24:05.900 に答える
7

私は、学校と多くの仕事をしている顧客のために、Web アプリ (ajax ベース) を作成する必要がありました。これらの学校では、インターネット接続が悪いことがよくあります。この単純な関数を使用して、接続があるかどうかを検出します。

CodeIgniter と Jquery を使用します。

function checkOnline() {
    setTimeout("doOnlineCheck()", 20000);
}

function doOnlineCheck() {
    //if the server can be reached it returns 1, other wise it times out
    var submitURL = $("#base_path").val() + "index.php/menu/online";

    $.ajax({
        url : submitURL,
        type : "post",
        dataType : "msg",
        timeout : 5000,
        success : function(msg) {
            if(msg==1) {
                $("#online").addClass("online");
                $("#online").removeClass("offline");
            } else {
                $("#online").addClass("offline");
                $("#online").removeClass("online");
            }
            checkOnline();
        },
        error : function() {
            $("#online").addClass("offline");
            $("#online").removeClass("online");
            checkOnline();
        }
    });
}
于 2011-04-12T19:05:37.323 に答える
7

ドメインへの ajax 呼び出しは、オフラインかどうかを検出する最も簡単な方法です

$.ajax({
      type: "HEAD",
      url: document.location.pathname + "?param=" + new Date(),
      error: function() { return false; },
      success: function() { return true; }
   });

これは概念を提供するためのものであり、改善する必要があります。

たとえば、エラー = 404 は、オンラインであることを意味するはずです。

于 2015-04-22T09:31:58.483 に答える
2

私のやり方。

<!-- the file named "tt.jpg" should exist in the same directory -->

<script>
function testConnection(callBack)
{
    document.getElementsByTagName('body')[0].innerHTML +=
        '<img id="testImage" style="display: none;" ' +
        'src="tt.jpg?' + Math.random() + '" ' +
        'onerror="testConnectionCallback(false);" ' +
        'onload="testConnectionCallback(true);">';

    testConnectionCallback = function(result){
        callBack(result);

        var element = document.getElementById('testImage');
        element.parentNode.removeChild(element);
    }    
}
</script>

<!-- usage example -->

<script>
function myCallBack(result)
{
    alert(result);
}
</script>

<a href=# onclick=testConnection(myCallBack);>Am I online?</a>
于 2010-11-01T09:21:52.017 に答える
2

インターネットがダウンしているか、サーバーがダウンしているかを検出するクライアント側のソリューションを探していました。私が見つけた他の解決策は、常にサードパーティのスクリプト ファイルまたはイメージに依存しているように見えました。外部でホストされているスクリプトまたはイメージが将来変更され、検出コードが失敗する可能性があります。

404 コードで xhrStatus を探すことで、それを検出する方法を見つけました。さらに、JSONP を使用して CORS 制限をバイパスします。404 以外のステータス コードは、インターネット接続が機能していないことを示します。

$.ajax({
    url:      'https://www.bing.com/aJyfYidjSlA' + new Date().getTime() + '.html',
    dataType: 'jsonp',
    timeout:  5000,

    error: function(xhr) {
        if (xhr.status == 404) {
            //internet connection working
        }
        else {
            //internet is down (xhr.status == 0)
        }
    }
});
于 2016-03-12T00:39:40.450 に答える
0

一部のメソッドの問題は、navigator.onLine一部のブラウザやモバイル バージョンと互換性がないことです。従来のXMLHttpRequest方法を使用して、ファイルがキャッシュに保存され、レスポンスXMLHttpRequest.statusが200 以上 304 未満。

これが私のコードです：

 var xhr = new XMLHttpRequest();
 //index.php is in my web
 xhr.open('HEAD', 'index.php', true);
 xhr.send();

 xhr.addEventListener("readystatechange", processRequest, false);

 function processRequest(e) {
     if (xhr.readyState == 4) {
         //If you use a cache storage manager (service worker), it is likely that the
         //index.php file will be available even without internet, so do the following validation
         if (xhr.status >= 200 && xhr.status < 304) {
             console.log('On line!');
         } else {
             console.log('Offline :(');
         }
     }
}
于 2019-07-19T21:18:41.793 に答える
-2

これが私が持っているヘルパーユーティリティのスニペットです。これは名前空間化されたjavascriptです：

network: function() {
    var state = navigator.onLine ? "online" : "offline";
    return state;
}

これをメソッド検出とともに使用する必要があります。そうしないと、これを行う「代替」方法が実行されます。これが必要なすべてになる時が近づいています。他の方法はハックです。

于 2009-10-29T12:38:23.480 に答える