Event for when user switches browser tabs

Question

I'm looking for an event which will fire whenever the user switches away from the page to another tab, and another event which fires when the user switches back to the tab again.

window.onblur and window.onfocus don't seem to work correctly across all browsers

Is there a proxy I could look at in order to synthesize this event?

I'm pretty sure this isn't possible, at least across all browsers. — Ian Elliott, Jun 24 '09 at 14:20
Actually, cross-browser compatibility [does not seem that bad](http://www.quirksmode.org/dom/events/blurfocus.html). You get some doubled events with Firefox and Safari/Windows, but that should be fairly easy to work around. `window.onfocus/onblur` have been available since before the Browser Wars, and their behavior hasn't changed much. Apparently there are some _bugs_ in implementations, but no differing _semantics_. — lanzz, Sep 09 '12 at 14:16
A lot of times I use autoscroll (middle mouse button) (on Windows at least) and a lot of copy-paste script-kiddies (not sure if it's `window.onblur` offhand) will trigger an obnoxious email subscription modal. Any developer worth their weight in mulch should test to make sure they're not annoying their users. — John, Mar 26 '21 at 02:23

score 53 · Accepted Answer · edited Oct 20 '17 at 14:29

53

You can also try and use VisibilityAPI.

document.addEventListener("visibilitychange", function() {
    if (document.hidden){
        console.log("Browser tab is hidden")
    } else {
        console.log("Browser tab is visible")
    }
});

See also here on Stackoverflow (possible duplicate)

edited Oct 20 '17 at 14:29

Peter

27
5

answered Feb 09 '17 at 10:26

ronapelbaum

1,377
12
19

2

A link to a potential solution is always welcome, but please [add context around the link](//meta.stackoverflow.com/a/8259) so your fellow users will have some idea what it is and why it’s there. **Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline.** Take into account that being _barely more than a link to an external site_ is a possible reason as to [Why and how are some answers deleted?](//stackoverflow.com/help/deleted-answers). – Makyen Mar 13 '17 at 00:05
VisibilityAPI is not good enough for all the browsers. It is not working on Firefox. – CodingbyRaj Dec 09 '20 at 08:54
@CodingbyRaj surely that's why its documentation page is hosted on mozilla (irony) – Anubioz Dec 10 '20 at 16:30
OP here: this is what I've been using for the last few years so have updated this to be the accepted answer. – EoghanM Apr 22 '21 at 11:23

score 45 · Answer 2 · answered Jun 24 '09 at 14:42

45

You might try using a framework, such as MooTools or jQuery which provide cross-browser support. They should be able to detect with more reliability the blur and focus events for the browser window.

I personally have used jQuery with much success:

$(window).blur(function(e) {
    // Do Blur Actions Here
});
$(window).focus(function(e) {
    // Do Focus Actions Here
});

answered Jun 24 '09 at 14:42

DanO

10,080
4
40
34

Cool, I might take a look at how those are implemented in jQuery – EoghanM Jun 30 '09 at 10:27
@Daniel Hey, actually i was looking for a similar kind of functionality. $(window).focus(function(e) { // Do Focus Actions Here}); The content inside focus will run every time when there is some other ajax functionality in the page, But one small change, 1. Is it possible to run the code inside this ONLY ONCE, when the user navigates back and forth between the same page. – RONE Jul 25 '13 at 06:45
3

_5 years later:_ Thanks Dude! – MCTaylor17 Dec 18 '14 at 08:22
Down-voted for answering a JavaScript question with jQuery. – John Mar 26 '21 at 01:48

Event for when user switches browser tabs

2 Answers2

Linked