【JavaScript】ウィンドウ・タブがアクティブになったことを判断し関数を実行する方法

ウィンドウ・タブがアクティブ・非アクティブになったことを判断し関数を実行する方法

今回は、JavaScriptでブラウザのウィンドウやタブがアクティブになった際と、アクティブでなくなった際に、それぞれ指定した関数を実行する方法となります。

以下、ソースコードの例となります。

// ウィンドウがアクティブになった際に実行する関数
function play() {
		// 実行させる処理を記述
}

// ウィンドウがアクティブでなくなった際に実行する関数
function pause() {
		// 実行させる処理を記述
}

// ウィンドウをフォーカスしたら指定した関数を実行
window.addEventListener('focus', play);

// ウィンドウからフォーカスが外れたら指定した関数を実行
window.addEventListener('blur', pause);

ソースコードの説明

上記コードのように、ウィンドウに対してaddEventListener()のfocusイベントを指定すると、ウィンドウがフォーカスされた際にaddEventListener()のコールバック関数を実行します。

そのため、ウィンドウやタブがアクティブになった際に、なんらかの処理を行いたい場合に利用できます。

また、反対にウィンドウに対してaddEventListener()のblurイベントを指定すると、ウィンドウからフォーカスが外れた際にaddEventListener()のコールバック関数を実行します。

そのため、ウィンドウやタブがアクティブでなくなった際に、なんらかの処理を行いたい場合に利用できます。

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。