【JavaScript】ウィンドウ・タブのアクティブを判断して関数を実行する方法

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

ウィンドウ・タブのアクティブ・非アクティブを判断して関数を実行する方法

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

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

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

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

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

JavaScriptコードの説明

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

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

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

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