JavaScript / jQueryでブラウザのウィンドウがアクティブかどうかを判別する方法
ある動画サイトを閲覧していた際にウィンドウが非アクティブになると視聴中の動画が止まるという機能が見受けられた。動画の再生・停止は置いておいてウィンドウがアクティブかどうかを判別し、それぞれ別の動作をJavaScript / jQueryで実装してみたい。以下に実装方法をメモ。
目次
ソースコード
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript / jQueryでウィンドウがアクティブかどうかチェックするテストページ</title>
</head>
<div id="alert"></div>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
//JavaScript
//アクティブ時
window.addEventListener('focus', active, false);
//非アクティブ時
window.addEventListener('blur', passive, false);
//jQuery
//アクティブ時
$(window).on('focus', function(){
active();
});
//非アクティブ時
$(window).on('blur', function(){
passive();
});
//アクティブ時に実行する関数
function active(){
document.getElementById(`alert`).innerText = `active`;
}
//非アクティブ時に実行する関数
function passive(){
document.getElementById(`alert`).innerText = `passive`;
}
</script>
</body>
</html>
ウィンドウがアクティブかどうか判別し、それぞれ別の関数をリクエストして#alert内の文字を変更するというもの。
注意点
PCのfirefoxから見た際にJavaScript版だとページ表示時にactive()が実行されたが、jQuery版は実行されなかった。jQuery版を使う場合はあらかじめactive()を実行する必要がある点に注意。
リファレンス
EventTarget: addEventListener(JavaScript)
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
focus event(jQuery)
https://api.jquery.com/focus/#on-
blur event(jQuery)
関連記事
-
-
jquery.snipeの使い方
使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...
-
-
フォームの入力・選択内容を自動保存してくれる「Garlicjs」プラグインの利用方法
お問い合わせページ等、フォームを設置したページで入力・選択した内容を保存したい。 ...
-
-
八地方区分→都道府県→路線→駅名の連携したセレクトメニュー の実装方法
八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...
-
-
Lightboxで画像拡大時に文字タイトルとリンクをつける
lightboxで画像をクリックして拡大した際に、文字タイトルとその文字にリンク ...
-
-
jQueryで画像が存在すれば表示、なければノーイメージ画像を表示
やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...