勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScript / jQueryでブラウザのウィンドウがアクティブかどうかを判別する方法

  jQuery JavaScript

ある動画サイトを閲覧していた際にウィンドウが非アクティブになると視聴中の動画が止まるという機能が見受けられた。動画の再生・停止は置いておいてウィンドウがアクティブかどうかを判別し、それぞれ別の動作を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)

https://api.jquery.com/blur/#on-

 - jQuery JavaScript

  関連記事

「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法

slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...

jQueryでページ表示時にラジオボタンやチェックボックスにcheckedがついている場合にイベントを実行する方法

ラジオボタンやチェックボックスをチェックした際に、jQuery側で何らかのイベン ...

FullCalendarでカレンダー内のイベントをクリックした際にタイトル以外の内容も表示させる方法

FullCalendarでカレンダー内のイベントをクリックした際にtitle以外 ...

テキストエリアを選択すると中身を全選択状態にする方法

テキストエリアやテキストボックスの中に文字が書いてあり、ドラッグをしなくても、そ ...

jQueryでコンテンツのスライド

jQueryもしくはJavaScriptでリンクを押すと 右から左にコンテンツを ...