タブがアクティブかどうかに応じて別のタイトルを示す

3169 ワード
titles tricks javascript テキストリンク
私は、見たことがなかった卑劣なものにちょうど遭遇しました、しかし、それは多分1999年にすでに働きました.ウェブサイトは、それが活発であるかどうかに応じて、タブで異なるタイトルを示していました.

全体のトリックは、タイトルを変更するには、ウィンドウ上のぼかしとフォーカスのイベントハンドラを使用することです.
window.onblur = function() {
    document.title = 'Please come back!';
}
window.onfocus = function() {
    document.title = 'You have 6 items';
}
また、その方法でfaviconを変更することができます.多分、これは一般的な実行であり、それはかなりスパムを感じるが、それにもいくつかの良いユースケースがあります.
他のイベントをクローズしたくない場合は、addEventListenerを使うほうがよいでしょう.
let activeTitle = 'You have 6 items';
let inactiveTitle = 'Please come back';
document.title = activeTitle;
window.addEventListener('blur', e => {
    document.title = inactiveTitle;
});
window.addEventListener('focus', e => {
    document.title = activeTitle;
});
JavaScript 6データ型
自動的にデスクトップ用に暗いモードに戻る