【JavaScript】ブラウザのオンライン・オフラインを判定しよう。サンプルあり

こんにちは。今ID等を色々調整してたりと忙しいので粗々なネタを…

今回はブラウザのオンライン判定を行う方法を解説します。

インデックス

解説&実装
サンプル

解説&実装

簡単に言えばwindow.navigator.onLineプロパティを使うだけです。

プロパティの詳しい情報はMDNもしくはHTML Living Standardのページをご確認を。

Navigator.onLine - Web API | MDN

ブラウザーのオンライン状態を返します。このプロパティは、オンラインを意味する true とオフラインを意味する false の論理値を返します。このプロパティは、ブラウザーのネットワークへの接続状態が変化するたびに更新を送信します。更新は、ユーザーがリンクをたどったときや、スクリプトがリモートページを要求したときに発生...

HTML Standard

基本的に全部のブラウザに対応しています。CanIUseで見られます。

実際のコードはこちらになります。

<button id='check'>判定！</button>
<script>
document.getElementById('check').addEventListener('click', function() {
if(navigator.onLine){
      document.write('オンラインです。');
   }else{
      document.write('オフラインです。');
   }
}, false);
</script>

ボタンを押したらオンラインかオフラインかを判定するイベントが発火する仕組みです。