Javascript to detect if user changes tab

Question

I am writing a webpage for online quiz. The basic requirement I have is that it must fire an event(stopping the quiz) if the user changes tabs or opens a news window even without minimizing their browser, i.e if the person is attempting to see the answer from some other window/tab. How can I do that?

Note : Try to avoid including a bleeding edge HTML5 feature in your answer because I want the feature to be supported by all major browsers currently.

Well certainly change in tab can be detected by using Javascript as far as i know.What i wanted to know is, if the change in focus of the window like opening a new browser can be detected! — Maxsteel, Apr 26 '12 at 17:52

score 88 · Accepted Answer · edited May 23 '17 at 12:10

88

You can determine if a tab or window is active by attaching a blur / focus event listener to window.

in jQuery it would be

$(window).focus(function() {
    //do something
});

$(window).blur(function() {
    //do something
});

quoted from this SO answer: https://stackoverflow.com/a/1760268/680578

edited May 23 '17 at 12:10

Community

1
1

answered Apr 26 '12 at 17:52

Kristian

21,204
19
101
176

4

Would also fire for just losing focus on the window, but the window is still visible. – Matt Apr 26 '12 at 17:53
2

Will it be able to detect if the user launches new window/browser without minimizing quiz window? – Maxsteel Apr 26 '12 at 18:03
If a new popup occurs, there will be a loss in focus to the current window, wouldn't there? – Kristian Apr 26 '12 at 18:06
5

you also get a false positive when clicking on an iframe in that page. – Eric Uldall Apr 22 '15 at 21:50
non-jQuery version: https://stackoverflow.com/a/69509921/2336212 – shieldgenerator7 Oct 09 '21 at 19:53

score 85 · Answer 2 · edited Jan 27 '22 at 19:40

85

In 2022 you can use an event listener with the visibilitychange event:

document.addEventListener("visibilitychange", (event) => {
  if (document.visibilityState == "visible") {
    console.log("tab is active")
  } else {
    console.log("tab is inactive")
  }
});

edited Jan 27 '22 at 19:40

unrealapex

578
9
23

answered Sep 01 '20 at 20:44

Bart Blast

959
6
6

While the 'Page Visibility API' mozilla docs don't reference this specifically, I tried this approach to check if a User has logged out on another browser tab and, if so, then updates the displayed login info when the User comes back to a tab. It seems to work well. Is this the correct method to check login status or is there a better way? – ND_Coder Dec 01 '22 at 12:00

score 37 · Answer 3 · answered Apr 26 '12 at 17:52

37

If you are targeting browsers that support it, you can use the Page Visibility API available in HTML5. It doesn't directly detect tab changes, per-say, but visibility changes. Which would include (but not limited to) tab changes.

See https://developer.mozilla.org/en/DOM/Using_the_Page_Visibility_API

answered Apr 26 '12 at 17:52

Matt

41,216
30
109
147

1

This is a handy API however it should be noted that at this time (March 6, 2015) there are some limitations: `Alt` + `Tab` (e.g. app switching on of any kind) doesn't register on Windows for Firefox/Chrome/IE10. Switching tabs within each browser does work just fine though. On iOS though app switching or device locking **does** trigger a visibility change. – scunliffe Mar 06 '15 at 15:45

score 31 · Answer 4 · answered Aug 11 '17 at 15:03

31

Best native function hands down, no jQuery.

document.hasFocus

Check the pen, check what happens when you go to the link and back to the codepen tab.

https://codepen.io/damianocel/pen/Yxxzdj

answered Aug 11 '17 at 15:03

ptts

1,022
8
18

2

Seems to work for me in Opera, FireFox, Safari and Chrome. Haven't tested in others. – Umair Mohammad Mar 06 '18 at 13:35
4

This demo checks for visibility every 200ms and is not ideal in terms of battery use. The Visibility API is event based and works down to IE10 and even on mobile, so I would strongly recommend you use that. – Richard Szalay Apr 16 '19 at 05:26
[has good browser support](https://caniuse.com/#search=hasFocus) – BluePie Sep 03 '20 at 23:55
greate and simple – katmanco Nov 04 '20 at 12:50
1

@UmairMohammad No need to test yourself to ensure compatibility: https://caniuse.com/?search=hasFocus – GPWR Mar 24 '23 at 15:51

score 8 · Answer 5 · answered Oct 09 '21 at 19:25

8

window onfocus and onblur work just fine:

window.onfocus = function (ev) {
    console.log("gained focus");
};

window.onblur = function (ev) {
    console.log("lost focus");
};

answered Oct 09 '21 at 19:25

shieldgenerator7

1,507
17
22

1

This has the advantage over 'visibilitychange' event that it is triggerred after browser's window gained / lost focus while 'visibilitychange' works only on tab switching – Kamil Bęben Mar 25 '22 at 15:14
This won't work though if say the code is inside of a iframe and the user clicks the main page. It will cause it to pause still – Derek Lawrence Nov 07 '22 at 07:12

score 5 · Answer 6 · answered Dec 21 '18 at 13:26

5

With jQuery:

$(window).on('focus', function () {

});

$(window).on('blur', function () {

});

$().focus & $().blur are deprecated.

answered Dec 21 '18 at 13:26

472084

17,666
10
63
81

Sadequs Haque · Answer 7 · 2021-01-23T19:17:19.547

1

Working on a similar project. This worked the best. On the highest level component which wouldn't normally rerender, add:

  setInterval( checkFocus, 200 );

  function checkFocus(){
    if(document.hasFocus()==false){
      //Do some checking and raise a red flag if this runs during an exam.
    }
  }

edited Jan 23 '21 at 19:17

answered Jan 17 '21 at 16:44

Sadequs Haque

158
10

score 0 · Answer 8 · answered Jul 30 '21 at 07:37

I needed something like this and it seems this behavior is slightly different on each browser.

    if (document.hidden !== undefined) { // Opera 12.10 and Firefox 18 and later support     
      visibilityChange = "visibilitychange";
    } else if (document.mozHidden !== undefined) {      
      visibilityChange = "mozvisibilitychange";
    } else if (document.msHidden !== undefined) {      
      visibilityChange = "msvisibilitychange";
    } else if (document.webkitHidden !== undefined) {      
      visibilityChange = "webkitvisibilitychange";
    } else if (document.oHidden !== undefined) {      
      visibilityChange = "ovisibilitychange";
    }
    
    document.addEventListener(visibilityChange, function(event) {
      handleVisibilityChange();
    }, false);

I have an example you can check: https://jsfiddle.net/jenol/4g1k80jq/33/

Javascript to detect if user changes tab

8 Answers8

Linked