How to check if a browser tab is currently active or not? - GeeksforGeeks

08 Mar, 2021
Sometimes we need to check if the current browser tab is active or not. When you open YouTube and watch a movie for a long in the browser then the auto screen timeout doesn’t work but when you open Facebook, after some time the screen turns off due to the screen timeout of the device. So how does YouTube know if a tab is active? 
In this article, we will discuss this. To achieve this functionality we have the following methods. 
The page Visibility API
Window.onfocus and Window.onblur
The Page Visibility API: It lets the developers know if the current tab is currently active or not. When the user switches to another tab or minimizes the window, then the pagevisibilitychange event gets triggered. This API added these properties to the document object. 
document.hidden: It returns true when the page is not in focus and returns false when the page is in focus.
document.visibilityState: It returns the current visibility state of the document. It returns these states as “hidden“, “visible”, “unloaded”, and “prerender”.  hidden means the current tab is not in focus, visible means the current tab is in focus, unloaded means the current tab is about to close, prerender means the page has been loaded but the user has not viewed the page. It is a read-only property, you cannot modify it.
document.onvisibilitychange: An eventListener when the visibilitychange event is fired.
Example: In this example, we are creating a popup that gets closed automatically when the user moves to another tab or minimizes the window. 
HTML
<!DOCTYPE html><html>  <head>    <style type="text/css" media="screen">      .popup {        height: 300px;        width: 300px;        margin: 0 auto;        border: 1px solid;        box-shadow: 7px 7px 167px 1px #585858;        display: none;        justify-content: center;        align-items: center;        margin-top: 100px;        background: #f1f1f1;        font-family: cursive;      }    </style>  </head>    <body>    <center>      <h1>Sample popup</h1>      <button id="btn">click me</button>    </center>      <div class="popup">      <p>I am a PopUp</p>    </div>    <script>      let btn = document.querySelector("#btn");      let pop = document.querySelector(".popup");        btn.addEventListener("click", () => {        pop.style.display = "flex";      });        document.addEventListener("visibilitychange", () => {        pop.style.display = "none";      });    </script>  </body></html>
Output :
The onfocus/onblur Method: This events are also used to know if the element is visible or not. But there is a problem with this method, If you are opening a small window on top of your current window, then the onblur event gets called, and when you close that small window, the onfocus method does not get called and the window remains in a blur state.
Example: In this example, we are showing a popup that automatically disappears when the user focuses out the current tab.
HTML
<!DOCTYPE html><html>  <head>    <style type="text/css" media="screen">      .popup {        height: 300px;        width: 300px;        margin: 0 auto;        border: 1px solid;        box-shadow: 7px 7px 167px 1px #585858;        display: none;        justify-content: center;        align-items: center;        margin-top: 100px;        background: #f1f1f1;        font-family: cursive;      }    </style>  </head>    <body>    <center>      <h1>Sample popup</h1>      <button id="btn">click me</button>    </center>      <div class="popup">      <p>I am a PopUp</p>    </div>    <script>      let btn = document.querySelector("#btn");      let pop = document.querySelector(".popup");        btn.addEventListener("click", () => {        pop.style.display = "flex";      });        window.onblur = () => (pop.style.display = "none");      window.onfocus = () => alert("onfocus event called");    </script>  </body></html>
Output: When the user changes its focus to another window and then again comes back to the original window, it alerts saying the following message.
onfocus event called
javascript-dataView
JavaScript-Questions
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript