ChromeでJavascriptを使ってタブのフォーカスがあるかないかを検出する方法は?
2023-09-22 01:54:30
質問
Google Chromeで、ユーザーが現在タブを表示しているかどうかを知る必要があります。ウィンドウにバインドされたイベント blur と focus を使用しようとしましたが、blur だけが正しく動作しているようです。
window.addEventListener('focus', function() {
document.title = 'focused';
});
window.addEventListener('blur', function() {
document.title = 'not focused';
});
フォーカスイベントの動作がおかしいのですが、たまにしか動作しません。他のタブに切り替えたり、戻ったりすると、focus イベントは作動しません。しかし、アドレス バーをクリックし、ページに戻ると、それが有効になります。または、別のプログラムに切り替えてから Chrome に戻ると、そのタブが現在フォーカスされている場合は、アクティブになります。
どのように解決するのですか?
2015年更新です。 visibility APIを使った新しいHTML5の方法(Blowsieさんのコメントから引用)。
document.addEventListener('visibilitychange', function(){
document.title = document.hidden; // change tab text for demo
})
元の投稿者が(質問で)示したコードは、2011年現在、動作しています。
window.addEventListener('focus', function() {
document.title = 'focused';
});
window.addEventListener('blur', function() {
document.title = 'not focused';
});
編集
: 数ヶ月後の Chrome 14 では、これはまだ動作しますが、ユーザーはウィンドウ内のどこかを少なくとも一度はクリックして、ページとインタラクトしていなければなりません。単にスクロールしたりするだけでは動作しません。動作内容
window.focus()
を実行しても、自動的に動作するようにはなりません。もし、回避策をご存知の方がいらっしゃいましたら、ご教示ください。
関連
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでメールアドレスを検証するのに最適な方法は何ですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ブラウザのウィンドウが現在アクティブでないことを検出する方法はありますか?
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] Javascript 空の配列の削減
-
[解決済み] JavaScriptで文字列を数値に変換する最速の方法は何ですか?
-
[解決済み] JavaScriptでの大文字小文字を区別しない正規表現
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。
-
[解決済み] JavaScriptとLuaの微妙な違い [終了しました]