In this article, I'll show you how to find out when users change tabs in browsers using JavaScript. It's going to be fun, it's helpful to see how often the user loses his attention. You can even use it to add the data to the database (it is out of the scope of this article).
There are two ways I know how to solve this problem. So, I'll be showing you both of them.
Method - 1
In this method, we will use two event listeners focus (when the user focuses on your website or window) and blur (when the user loses focus)
We don't need HTML actually, because when users are on another tab so they won't see your website page. Only JavaScript will do:
// when the user loses focus
window.addEventListener("blur", () => {
document.title = "Breakup";
});
// when the user's focus is back to your tab (website) again
window.addEventListener("focus", () => {
document.title = "Patch Up";
});
Method - 2
In this method, we only need one event listener (visibilitychange). It has a property called visibilityState
which we can use to detect the window switching state.
document.addEventListener("visibilitychange", () => {
// it could be either hidden or visible
document.title = document.visibilityState;
});
You can use these to add many functionality to your website such as stop music or video when the user loses focus:
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === 'visible') {
music.play();
} else {
music.pause();
}
});
If you want to try it yourself then check out LIVE
Wrapping up:
That's all you need to detect when users switch tabs. Both methods work as expected. You can use any of them. If you enjoyed this article, then don't forget to give โค๏ธ and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one.
๐ Connect with me:
Twitter
Github
Instagram
Newsletter
LinkedIn
Website
Buy me a Coffee
Top comments (31)
Just a side note, the "blur" event will trigger if you leave the tab opened but just focus another app on your machine... while the visibilitychange will only trigger if you switch to another tab.
I didn't know that, thanks for the note I'll look into it โจ
Real world usage: react-query Window Focus Refetching
Thanks for this mate :)
Simple and a Great one
Thanks.
Thanks! That's useful for example to trigger people to come back :).
You can save the meta document title so when a user come's back the normall meta title is displayed.
Yes, you can do that. You can also send the notifications to the user to come back using Notifications API
We can track the tab switch but there will be an issue when the user presses the back button.
Well, it depends if you have implemented this functionality on the whole website or a single page. There could be two cases-
Thank you for the post, bookmarked!
That's great. It's my pleasure โบ๏ธ
Thank you so much for this awesome article
This is a pleasure, the positive feedbacks are always inspiring.
You can use this to evaluate the quality of your articles. If the user switches between tabs, they may not like your article. But I wouldn't change the tab title - it's annoying.
Changing the title is all about showing that it works.I won't change title either.
Cool! Great!
Thanks mate ๐
Cool!
Thanks for sharing this.
It's always a pleasure :)
Very Good, I never realized it can be this simple, Thanks for this !!!
That's great.
Omg I didn't know this was even possible, thanks for sharing it.
Yes it is possible, And now you know too. :)
๐ฎ
Why are you in shock ๐ค