https://idea-hack.com/courses/lets-understand-various-events-that-are-used-to-implement-processing-according-to-the-users-operation-in-javascript/lessons/how-to-use-navigator-online-property-and-online-offline-event-to-judge-online-offline-status-with-javascript/
https://idea-hack.com/courses/lets-understand-various-events-that-are-used-to-implement-processing-according-to-the-users-operation-in-javascript/lessons/how-to-use-navigator-online-property-and-online-offline-event-to-judge-online-offline-status-with-javascript/

JavaScriptでオンライン・オフライン状態を判別するnavigator.onLineプロパティとonline・offlineイベントの使い方

JavaScriptでオンライン・オフライン状態を判別

JavaScriptでユーザーがネット回線に接続しているか、していないかを判別するにはnavigator.onLineプロパティが便利です。

その他にも2つのイベントonlineofflineを使うことで、ページを開いている間のネットワーク環境の検知も可能です。

プロパティ

プロパティ意味返り値
navigator.onLineネットワークの接続状況を判定真偽値

イベント

イベント意味
onlineネットワーク接続が行われた時に実行されるイベント
offlineネットワーク接続が切れた時に実行されるイベント
ネットワーク関連のイベント

サンプルコード

サンプルコードとして、ページ読み込み時にネットワークの接続状況を確認して、出力するサンプルコードを紹介します。

そして、その際にネットワーク状態を関しするために、onlineofflineイベントに関数を仕掛けます。

Output
現在のネットワーク接続状況
Pug
div 現在のネットワーク接続状況
	#targetText
JavaScript
const targetText = document.getElementById( 'targetText' );
window.addEventListener('load', () => {
	if ( navigator.onLine ) {
		targetText.textContent = `ページ読み込み時の判定です。ネットワークに接続してます。`;
	} else {
		targetText.textContent = `ページ読み込み時の判定です。ネットワークに接続していません。`;
	}
	window.addEventListener('online', () => {
	targetText.textContent = `ネットワークに接続しました。`;
});

window.addEventListener('offline', () => {
	targetText.textContent = `ネットワーク接続が切れました。`;
});
});
インストラクター
コメント

コメントを残す