DEV Community

Detect When Users Switch Tabs using JavaScript

Jatin Sharma on September 07, 2022

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 o...

Read full post

Edgar Alves • Sep 8 '22

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.

Jatin Sharma • Sep 8 '22

I didn't know that, thanks for the note I'll look into it ✨

official_dulin • Sep 8 '22

Real world usage: react-query Window Focus Refetching

Jatin Sharma • Sep 8 '22

Thanks for this mate :)

Wisdom-Samuel7 • Apr 4 '23

Simple and a Great one

Jatin Sharma • Apr 5 '23

Thanks.

Lenardo de Bruine • Sep 12 '22

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;
        });

Jatin Sharma • Sep 12 '22

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

Sonia • Nov 10 '22

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

Jatin Sharma • Nov 22 '22

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.

Al - Naucode • Sep 7 '22

Thank you for the post, bookmarked!

Jatin Sharma • Sep 8 '22

That's great. It's my pleasure ☺️

Archit Sharma • Sep 12 '22

Thank you so much for this awesome article

Jatin Sharma • Sep 12 '22

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

Gary • Sep 13 '22 • Edited

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.