最終更新日：
公開日：
レシピ
ブラウザ
ページ表示中にブラウザがオンライン／オフラインか確認する
ページを表示している端末のインターネット接続状況を確認する方法を解説します。
この記事のポイント
- navigator.onLineでインターネット接続状況を取得する
- イベントリスナーを使ってインターネット接続状況を監視する
目次
端末のインターネット接続状況を確認する
navigatorオブジェクトのonLineプロパティを参照することで、オンラインのときはtrue、オフラインのときはfalseのいずれかを真偽値として取得することができます。
onLineプロパティを参照して出力を分けるコードは次のようになります。
コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('load', function(){
if( navigator.onLine ) {
console.log("オンライン");
} else {
console.log("オフライン");
}
});
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
</body>
</html>ページアクセス時にインターネット接続状況をonLineプロパティから取得して、if文で「オンライン」「オフライン」のどちらを出力するか判定しています。
リアルタイムにインターネット接続状況を監視する
実用的に考えると、ページを開いた瞬間のインターネットアクセス状況を調べるよりも、ページ表示中に接続解除があったり、再び繋がったときなどを監視することが多いと思います。
このようなインターネットの接続状態が切り替わるとイベントが発生するようになっており、オンライン／オフラインのイベントをそれぞれ設定しておくことで接続状況を把握することができるようになります。
コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>GRAYCODE JavaScript</title>
<script>
window.addEventListener('load', function(){
// オンラインになったら実行
window.addEventListener('online', function(){
checkOnline();
});
// オフラインになったら実行
window.addEventListener('offline', function(){
checkOnline();
});
});
function checkOnline() {
if( navigator.onLine ) {
console.log("オンライン中");
} else {
console.log("オフラインになりました");
}
}
</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
</body>
</html>インターネットに接続されたときはイベントonlineが発生し、反対に接続解除されたときはイベントofflineが発生します。
今回はいずれも新しく作成したcheckOnlineメソッドを実行するように設定しています。
checkOnlineメソッドの中は冒頭のコードと同様にif文でonLineプロパティを参照して接続状態を判定し、メッセージを出力する内容です。
このコードを実行すると、次のようにインターネットの接続状態がオンライン／オフラインと切り替わるたびにcheckOnlineメソッドが実行されてメッセージが出力されます。