HTMLのnavigator.onLineプロパティでブラウザのオンライン・オフライン状態を判定する方法
navigator.onLineプロパティは、ブラウザが現在オンライン状態かオフライン状態かを示す真偽値（boolean）を返します。このプロパティを活用すれば、ユーザーのネットワーク接続状況をJavaScriptで簡単に検出し、それに応じた処理を実装することができます。
構文
基本的な構文は以下のとおりです。
navigator.onLine
戻り値は次のようになります。
- オンラインの場合：
true - オフラインの場合：
false
サンプルコード
ここでは、HTMLのnavigator onLineプロパティを使用した具体的な例を紹介します。ボタンをクリックすると、ブラウザがオンラインかオフラインかを判定し、その結果を画面に表示します。
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 20px;
width: 330px;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.2rem;
color: #fff;
}
</style>
<body>
<h1>HTML navigator onLine property Demo</h1>
<button class="btn" onclick="display()">Check Browser Online/Offline Mode</button>
<div class="show"></div>
<script>
function display() {
var msg = document.querySelector(".show");
if (navigator.onLine) {
msg.innerHTML = "Hey! You are online";
} else {
msg.innerHTML = "Hey! You are offline";
}
}
</script>
</body>
</html>
実行結果
ページを開くと、次のような画面が表示されます。
「Check Browser Online/Offline Mode」ボタンをクリックすると、ブラウザがオンラインモードかオフラインモードかを判定できます。ネットワークに接続している場合は、オンラインである旨のメッセージが表示されます。
次に、ネットワーク接続を切断してから、再度同じボタンをクリックしてみてください。今度はオフラインであることを示すメッセージが表示されます。
このように、navigator.onLineプロパティを使うことで、数行のコードでブラウザの接続状態を手軽にチェックできます。オフライン時のフォールバック処理や、接続状態に応じたUIの切り替えなど、さまざまな場面で役立つ便利なプロパティです。
-
HTMLのnavigator.productプロパティとは？ブラウザエンジン名の取得方法を解説
navigator.product プロパティは、ブラウザのエンジン名を返すプロパティです。読み取り専用のプロパティで、JavaScriptから手軽にブラウザの製品情報を取得できます。なお、現代の主要なブラウザでは互換性の維持のため、ほとんどの場合「Gecko」という値が返される点に注意しましょう。構文navigator.productプロパティの基本的な構文は以下のとおりです。navigator.productそれでは、HTMLのnavigator.productプロパティを使った具体的なサンプルコードを見ていきましょう。サンプルコード<!DOCTYPE html> <ht
-
HTMLのnavigator.platformプロパティとは？使い方とサンプルコードを解説
HTMLのnavigator.platformプロパティは、ブラウザがコンパイルされた（動作している）プラットフォームの情報を文字列として返します。このプロパティを利用することで、JavaScriptからユーザーのOS環境に関する情報を取得できます。 構文 navigator.platformプロパティの構文は以下の通りです。 navigator.platform 戻り値 このプロパティは、プラットフォーム名を表す文字列を返します。主な戻り値の例は以下の通りです。 Windows環境：「Win32」 Mac環境：「MacIntel」 Linux環境：「Linux x86_64」など HTM