エンジニアのひよこ_level10

【毎日更新!】新卒3年目エンジニアブログです!

【JavaScript】ウィンドウのアクティブ・非アクティブのイベント【865日目】

ウィンドウのアクティブ・非アクティブ

アクティブなウィンドウと、そうでないウィンドウで処理を分けたい。

場合によっては、非アクティブにしたい時とかにどうするか。

blur/focus

イベントのblur(非アクティブ)、focus(アクティブ)を操作すると良いです。

対象ウィンドウオブジェクトに、 focus関数を使うと、アクティブウィンドウを切り替えたり出来ます。
新しいウィンドウを生成→ウィンドウのフォーカスを変更とかが出来ます。

イメージしやすいように試す方法

アドバイスいただきました、ありがとうございます!

window.addEventListener('blur', () => {console.log('inactive');});
window.addEventListener('focus', () => {console.log('active');});

これを仕込んでから、タブやウィンドウをクリックして、アクティブ・非アクティブを切り替えるとわかりやすいかもです!

ドキュメント

developer.mozilla.org