ブラウザのタブが選択されたときにアクションを実行したい

jQuery、javaScriptについて教えてください。

当該サイトのタブがブラウザにABCと複数あるとき、タブの選択を検出してアクションを実行したいのですが、可能でしょうか？

調べたところ下記でできるような気がしているのですが、アラートは実行されませんでした。

js
1	document.addEventListener('webkitvisibilitychange', function(){
2		if ( document.webkitHidden ) {
3			// 非表示状態になった時の動作
4		} else {
5			// 表示状態になった時の動作
6			alert('タブが選択された');
7		}
8	}, false);

尚、考えている用途としてはこうです。

まず、下記機能を実装しています。

➀ボタンクリック
➁ローカルストレージの値を変化
➂ローカルストレージの値をHTMLに反映させる

この場合、新しいタブが選択されたときに「クリックした内容がHTMLに反映していない」ということになってしまいます。なぜなら➂のHTMLは、選択前のタブにしか反映していないためです。

なので、新しいタブの選択を検出し、そのときには改めてローカルストレージの値を、新しいタブの方のHTMLに反映させたいと考えました。その用途として今回の質問をさせて頂きました。

行動規範の内容に同意します

回答4件

ベストアンサー

visibilitychange ではタブの表示切り替えがわかりますが、別ウィンドウで開いている場合にはお手上げになってしまいます。
ストレージの値を変化をとらえたいのであれば、onstorage を使ったほうがいいでしょう。
https://developer.mozilla.org/ja/docs/Web/API/WindowEventHandlers/onstorage

JavaScript
1window.addEventListener('storage', function(event) {
2  console.log(event);
3}, false);

ちなみに、IE では少し挙動が違うようなので注意。

IE11ではonStorageイベントの挙動が異なる
https://ameblo.jp/softwaredeveloper/entry-12333519451.html

投稿2019/07/01 04:24

x_x

総合スコア13749

massuguda

2019/07/09 22:02

遅くなりまして申し訳ございません。良い方法をありがとうございます。

行動規範の内容に同意します

質問のコードは正しくないです。
下記のように記述すれば可能です。

js
1document.addEventListener('visibilitychange', function() {
2  if (document.visibilityState) {
3    alert('タブが選択された');
4  }
5});

投稿2019/06/28 13:48

yasutomi

総合スコア2941

massuguda

2019/07/09 22:03

どうもありがとうございます。

行動規範の内容に同意します

visibilitychangeはどうでしょう？

投稿2019/06/28 13:44

yambejp

総合スコア117719

massuguda

2019/07/09 22:03

どうもありがとうございます。それでした。

行動規範の内容に同意します

MDN に実現したいことのサンプルコードがありましたので、リンクを貼り付けておきます。
Page Visibility API - 開発者ガイド | MDN

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>selected</title>
6</head>
7<body>
8  <script>
9    // hidden プロパティおよび可視性の変更イベントの名前を設定
10    var hidden, visibilityChange;
11    if (typeof document.hidden !== "undefined") { // Opera 12.10 や Firefox 18 以降でサポート
12      hidden = "hidden";
13      visibilityChange = "visibilitychange";
14    } else if (typeof document.msHidden !== "undefined") {
15      hidden = "msHidden";
16      visibilityChange = "msvisibilitychange";
17    } else if (typeof document.webkitHidden !== "undefined") {
18      hidden = "webkitHidden";
19      visibilityChange = "webkitvisibilitychange";
20    }
21
22    function handleVisibilityChange() {
23      if (document[hidden]) {
24        alert('タブが選択された');
25        document.title = 'deselected';
26      } else {
27        document.title = 'selected';
28      }
29    }
30
31    // ブラウザーが addEventListener または Page Visibility API をサポートしない場合に警告
32    if (typeof document.addEventListener === "undefined" || hidden === undefined) {
33      console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
34    } else {
35      // Page Visibility の変更を扱う
36      document.addEventListener(visibilityChange, handleVisibilityChange, false);
37    }
38  </script>
39</body>
40</html>