私はStackOverflowを検索し、これを行う方法についてさまざまなトピックを見てきましたが、実際には私の特定の状況に関係するものは何もありません。私は（クラスのために）モバイル "アプリケーション"（HTML5、CSS、jQueryを使用）を書いています。それは、すべての必要なファイルのローカルコピーを含むスタンドアロンの "app"で終わることになります。私のページの1つには送信フォームがあり、オフラインの場合はユーザーがフォームを送信できないので、そのページをカスタム404ページにリダイレクトしたいと思います。ネットワークに接続されていることを確認します。 jQuery
jQueryでこれを実現する方法があるかどうかを探していましたが、まだ実際には何も見つかりませんでした。
おかげ
あなたがnavigator.onLineプロパティを確認したり、offline/onlineイベントを聴くことができますいずれか
if (navigator.onLine) {
// I'm online so submit the form.
}
を使用することができます。
$(document).on('offline online', function (event) {
alert('You are ' + event.type + '!');
});
出典：http://www.html5rocks.com/en/mobile/workingoffthegrid/
そして、ここでこれらのイベントのいくつかMDNのドキュメントは、次のとおりです。https://developer.mozilla.org/en/Online_and_offline_events
私は自分自身、これらのイベントに慣れていないんだけど、あなたは上記のリンクを読めば、あなたは良い多くの情報を見つける必要があります。ここで
これはクリーンな方法ですが、これらのイベントはすべてのブラウザで機能しますか？ –
絶対にそうではありません:)。これはHTML5固有のイベントを使用していますが、まだ公式な仕様ではありません。以下は、 'navigator.onLine'のMDNサイトへのリンクです：https://developer.mozilla.org/en/DOM/window.navigator.onLine（ブラウザのサポートは最下部にあります） – Jasper
@ToddMoses私はテストする必要がありますそれが働いていることを確認するためにそれを出しますが、トッド・モーゼの答えは使い方が良いようです。しかし、フレームワーク全体ではなく、小さなリソースを使用してロードすることができます。たとえば、グローバルスコープにフラグを追加する独自のJSファイルをホストすることができます。フラグが存在する場合、ユーザーはオンラインです。 JSファイルがキャッシュされていないことを確認するには、常に更新するためにファイルのヘッダーを適切に設定する必要があります。 – Jasper
はに基づいて、私はどうなるのかです：how to check if the user has the connection to the internet
まず、ユーザーがオンラインであるかどうかを判断するためにJavaScriptライブラリのリンクを使用します。 trueの場合、フォームのアクションプロパティをオンラインページに変更します。オフラインページに変更します。
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js></script>
<script>
$('#target').submit(function() {
if (typeof window.$ !== 'function') {
$('myform').attr("action" , "offlinepage.html" );
}
else
{
$('myform').attr("action" , "onlinepage.html" );
}
});
</script>
実際には、これはまったくjQueryを必要としません。 HTML5自体には、オンライン/オフライン状態で実行されるアプリケーション用のきちんとした機能があります。cache manifest
<html manifest="cache.manifest">
このマニフェストファイルの内容をキャッシュするファイル機能（NETWORK）にオンライン条件を必要とするリソースブラウザを、（伝えます：キャッシュマニフェストは<html>タグのmanifest属性で参照プレーンテキストファイルですCACHE）、オフラインでネットワークリソースが要求された場合の対処方法（FALLBACK）
CACHE MANIFEST
# the above line is required
NETWORK:
*
FALLBACK:
* error404.html
CACHE:
index.html
about.html
help.html
# Plus all other resources required to make it look nice
style/default.css
images/logo.png
images/backgound.png
マニフェストを使用する場合、ブラウザはまずマニフェストを調べと、任意のスクリプトなしに、オンラインまたはオフラインであることに基づいて、それに応じて作用します。
http://dev.w3.org/html5/spec-preview/offline.html#manifests
UPDATE：
応答コンテンツタイプに重要な要件に注意してください。プレーンテキストは単純に機能しません。
もマニフェストにリストされていないすべてのURLは、結果として負荷から遮断されることに注意してください。だからこそ私は上記のマニフェストをワイルドカード（マニフェストは、
text/cache-manifestMIMEタイプを使用して配信する必要があります。http://dev.w3.org/html5/spec-preview/offline.html#writing-cache-manifests
*）で修正して "残り"を許可しています。それはあなたが始めるのを助けるかもしれません。
興味深い....これは私が探していたものかもしれません...私は5つのWebページ（index.html、contact.html、about.html、rates.html、reserve.html）があり、インデックスは何があっても、約ページと一緒に表示されます。 連絡先、予約、料金私がオフラインのときにカスタム404ページにリンクしたい。どうすればいい？ – Brendan
@Brendan私はあなたのシナリオに合わせて答えを更新しました。 –
あなたのソリューションを私の通常のブラウザで動作させることができなくても、厳密にモバイル用にコーディングしていれば、それは良い方法だと私は信じています。 – Brendan
nミリ秒ごとにリクエストを行うようにajaxSetupを設定してください（ここに1000を置く）、タイムアウトしてからボタンを無効にするかどうかを確認してください。ユーザがネットワークに接続される可能性があるためwindow.navigator.onLineを使用して
$.ajaxSetup({
timeout: 1000,
error: function(request, status, maybe_an_exception_object) {
if(status != 'timeout')
//Code to enable button
else
//Code to disable button
}
});
これは、クライアントがたくさんいるときに接続に重大なオーバーヘッドを引き起こす可能性があります。 –
は、inherantly信頼できないですが、そのネットワークは、インターネットへのアクセスを持っていませんでした。
しかし、ここでは必要最小限の例です
<!DOCTYPE HTML>
<html>
<head>
<title>Online status</title>
<script>
function updateIndicator() {
document.getElementById('indicator').textContent = navigator.onLine ? 'online' : 'offline';
}
</script>
</head>
<body onload="updateIndicator()" ononline="updateIndicator()" onoffline="updateIndicator()">
<p>The network is: <span id="indicator">(state unknown)</span>
</body>
</html>
アクションでフィドルを参照してください：http://jsfiddle.net/3rRWK/
lol。有効な3年前の回答のダウンボートを受け取りました。 :) – Layke
私は接続性を確認するために、次のコードを使用しています。注：上記のソリューションは、Firefoxの内部では「オフライン作業」ステータスに依存しません。
// Register listeners
window.addEventListener("offline", function(){
$('#globalDiv').hide();
$("#message").html('WARNING: Internet connection has been lost.').show();
});
window.addEventListener("online", function(){
$("#message").empty().hide();
$('#globalDiv').show();
});
シンプルなイベントを使いたい場合、2015年現在でこの回答が最も信頼できると思われます。 – dlsso
ネットワークに接続していない状態でページをナビゲートすると、どのページでこれを再初期化できますか？これは機能していますが、ネットワークがないかどうかに関わらず、ページのナビゲーションを許可する必要があります。同様に、すべてのページにネットワークメッセージが表示されないようにする必要があります。 – user2584538
ページ全体をブロックする代わりに、ページの上部に「ネットワークなし」というメッセージをバナーとして表示できますが、ネットワークは存在しません。ネットワークはありません。そのためには、ページをローカルにキャッシュする必要があります。 HTML5にはそのためのメカニズムがあります（キャッシュマニフェスト）。参考にしてください：http：//www.w3schools.com/html/html5_app_cache.asp – Webomatik
指定したとおりに試しました。 if/elseの両方に警告します。もし私が期待しているようにifが完全に動作すると、ネットワーク接続を無効にしてelseをテストすると失敗し、if文に表示される内容が表示されます。 – Brendan
それは馬鹿な証拠ではなく、ブラウザからデータを取得します。 – Bot
「オフライン」モードであるかどうかを示すだけで、インターネットにアクセスできるかどうかを実際に確認する方法を探していました。 – Akbari