7

Showing different titles depending if the tab is active or not

 2 years ago
source link: https://christianheilmann.com/2022/02/10/showing-different-titles-depending-if-the-tab-is-active-or-not/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Showing different titles depending if the tab is active or not

Thursday, February 10th, 2022 at 7:49 pm

I just encountered a sneaky thing I had not seen, although it probably worked in 1999 already. A web site was showing a different title on the tab, depending on it being active or not.

Different titles showing on active and inactive tab

The whole trick is to use the blur and focus event handlers on the window to change the title.

window.onblur = function() {
    document.title = 'Please come back!';
}
window.onfocus = function() {
    document.title = 'You have 6 items';
}

You could also change the Favicon that way. Maybe this is a common practice and it feels pretty spammy, but there may be some good use cases for it, too.

If you don’t want to clobber other events, it is better to use `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;
});

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK