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-the-visibilitychange-event-that-occurs-when-the-tab-becomes-background-in-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-the-visibilitychange-event-that-occurs-when-the-tab-becomes-background-in-javascript/

JavaScriptでタブがバックグラウンドになった時に発生するvisibilitychangeイベントの使い方

タブがバックグラウンドになったかを判定するvisibilitychangeイベント

JavaScriptでタブがバックグラウンドになったかを判定して処理を追加したい場合はvisibilitychangeイベントが便利です。

イベント

イベント発生条件
visibilitychangeブラウザーのタブの表示状態が変わった
タブ関連のイベント

サンプルコード

サンプルコードとして、タブの動きに応じて文字列を出力するサンプルコードを紹介します。

Output

タブの状態の変化に応じて文字列を出力

Pug
p タブの状態の変化に応じて文字列を出力
	#targetText 
JavaScript
const targetText = document.getElementById('targetText');

document.addEventListener('visibilitychange', () => {
	if ( document.visibilityState === 'visible' ) {
		targetText.textContent = 'このタブが表示されました';
		console.log('このタブが表示されました');
	} else if ( document.visibilityState === 'hidden' ) {
		targetText.textContent = 'このタブがバックグラウンドになりました';
		console.log('このタブがバックグラウンドになりました');
	}
});
インストラクター
コメント

コメントを残す