How can I detect when user switches the tab using javascript?

Question

I want to end the fullscreen mode when the tab is changed or quickly switched. Is it possible to do it with javascript?

I have the following javascript code which ends fullscreen I want help in detecting the change in inter chrome tabs [using ctrl + tab shortcut] also in detecting the change in windows tabs like when a person switch chrome(any browser) to file explorer (for example)[using alt + tab shortcut].

My javascript code --

if (document.exitFullscreen) {
  document.exitFullscreen();
} 
else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
} 
else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
} 
else if (document.msExitFullscreen) {
  document.msExitFullscreen();
}

I want to wrap this code in the switch tab function. Please help.

I also tried -

document.addEventListener("visibilitychange", function tabsswitch() {
   if(document.hidden) {
     alert('document hidden')
   } 
});

but that's not working when i change the windows tab for instance like i switch from chrome to my code editor and again back to chrome it does't show any alert.

score 2 · Answer 1 · answered Jun 20 '20 at 04:19

2

There is HTML 5 API to detect if tab visibility is changed:

document.addEventListener("visibilitychange", function () {});

answered Jun 20 '20 at 04:19

BeHappy

3,705
5
18
59

Sorry, but this is working fine for inter chrome tab switching but its not working for program switching. – Jun 20 '20 at 04:54
What to you mean of *program switching*? – BeHappy Jun 20 '20 at 04:56

score 1 · Answer 2 · answered Jun 20 '20 at 04:24

The Page Visibility API provides us with two top-level attributes: document.hidden (boolean) and document.visibilityState (which could be any of these strings: “hidden”, “visible”, “prerender”, “unloaded”).

This would not be not good enough without an event we could listen to though, that’s why the API also provides the useful visibilitychange event.

So, here’s a basic example of how we could take action on a visibility change:

function handleVisibilityChange() {
  if(document.hidden) {
    // the page is hidden
  } else {
   // the page is visible
  }
}

document.addEventListener("visibilitychange", handleVisibilityChange, false);

Reference

this is working pretty fine when i am changing tabs within chrome but it isn't succesfull for program switch. — , Jun 20 '20 at 04:51

score 0 · Answer 3 · answered Feb 16 '21 at 17:33

I got similar issue, while using FullScreen mode tab visibility wasn't working . To detect the visibility while using alt + tab add this to existing code

window.addEventListener('focus', function() {
  console.log('show');
}, false);
window.addEventListener('blur', function() {
   console.log('hide');
}, false);

this worked for me! Hope this will be useful to detect the tab change in full screen and while using alt + tab

How can I detect when user switches the tab using javascript?

3 Answers3