DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Detect When Users Switch Tabs using JavaScript
Jatin Sharma
Jatin Sharma

Posted on • Updated on • Originally published at j471n.in

Detect When Users Switch Tabs using JavaScript

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";
});
Enter fullscreen mode Exit fullscreen mode

Demo-1

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;    
});
Enter fullscreen mode Exit fullscreen mode

demo-2

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();
  }
});
Enter fullscreen mode Exit fullscreen mode

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 (29)

Collapse
 
edgaralves profile image
Edgar Alves

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.

Collapse
 
j471n profile image
Jatin Sharma Author

I didn't know that, thanks for the note I'll look into it โœจ

Collapse
 
mrdulin profile image
official_dulin

Real world usage: react-query Window Focus Refetching

Collapse
 
j471n profile image
Jatin Sharma Author

Thanks for this mate :)

Collapse
 
lenardo profile image
Lenardo de Bruine

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.

        var documentTitle = document.title;

        window.addEventListener("blur", function() {
            document.title = "๐Ÿ‘‹ Hi, come back!";
        });

        window.addEventListener("focus", function() {
            document.title = documentTitle;
        });
Enter fullscreen mode Exit fullscreen mode
Collapse
 
j471n profile image
Jatin Sharma Author

Yes, you can do that. You can also send the notifications to the user to come back using Notifications API

Collapse
 
sonia58073354 profile image
Sonia

We can track the tab switch but there will be an issue when the user presses the back button.

Collapse
 
j471n profile image
Jatin Sharma Author

Well, it depends if you have implemented this functionality on the whole website or a single page. There could be two cases-

  • When the user presses the back button and leaves the website. In this case, we can't do anything.
  • When the user presses the back button but stays on the same website then it will load the initial status of the page (visible) as the user hasn't left the tab.
Collapse
 
naubit profile image
Al - Naubit

Thank you for the post, bookmarked!

Collapse
 
j471n profile image
Jatin Sharma Author

That's great. It's my pleasure โ˜บ๏ธ

Collapse
 
iarchitsharma profile image
Archit Sharma

Thank you so much for this awesome article

Collapse
 
j471n profile image
Jatin Sharma Author

This is a pleasure, the positive feedbacks are always inspiring.

Collapse
 
tapive profile image
Gary • Edited on

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.

Collapse
 
j471n profile image
Jatin Sharma Author

Changing the title is all about showing that it works.I won't change title either.

Collapse
 
faizal97 profile image
Faizal Ardian Putra

Cool! Great!

Collapse
 
j471n profile image
Jatin Sharma Author

Thanks mate ๐Ÿ˜Š

Collapse
 
faizal97 profile image
Faizal Ardian Putra

Cool!

Collapse
 
andrewbaisden profile image
Andrew Baisden

Thanks for sharing this.

Collapse
 
j471n profile image
Jatin Sharma Author

It's always a pleasure :)

Collapse
 
umamahesh_16 profile image
Umamaheswararao Meka

Very Good, I never realized it can be this simple, Thanks for this !!!

Collapse
 
jenniesworth12 profile image
Jennie Sworth

That's great.

Collapse
 
sohamgupta profile image
Soham Gupta

Omg I didn't know this was even possible, thanks for sharing it.

Collapse
 
j471n profile image
Jatin Sharma Author

Yes it is possible, And now you know too. :)

Collapse
 
vijay_dev profile image
vijay banjara

๐Ÿ˜ฎ

Collapse
 
j471n profile image
Jatin Sharma Author

Why are you in shock ๐Ÿค”

Collapse
 
lunaisakh profile image
Luna Isakh

Thank you for sharing the post. Let me bookmarked it

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. ๐Ÿ›