June 20, 2021

How to Check if Browser Tab is Active in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to check if browser tab is active in javascript. There could be various scenarios where you would like to detect whether a user is active on your website or not.

A good example can be a downloading website that offers free and premium plans. If you are a premium user, then your download will start without any waiting period. But if you are a free or regular user, then you have to wait for a certain period of time before downloading can start.

For instance, the waiting period is 30 seconds. You might think why not just watch some Youtube video in another tab and when 30 seconds are over, the download will start automatically. But it would not happen since they will detect that you were not active on the website and the counter will freeze as soon as you switch tabs. It will resume automatically when you come back.

To accomplish our goal, we can make use of Page Visibility API. With the help of this, we can detect when a document becomes hidden or visible since the change in visibility triggers visibilitychange event. I recommend you to have a look over MDN docs to learn more about it.

In the following example, we will pause or resume counter depending upon the visibility of the document. Please have a look over the code example and the steps given below.

HTML & CSS

We have 2 elements in the HTML file (div and h1). The div element is just a wrapper for the h1 element.
The default innerText for h1 element is “0”.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div style="margin-top: 20px; text-align: center;">
        <h1>0</h1>
    </div>


    <script src="script.js"></script>
    
</body>
</html>

Javascript

We have selected the h1 element using document.querySelector() method and stored it in the counter variable.
We have attached DOMContentLoaded event to the window and in the event handler function, we are calling startCounter() method.
We have 2 global variables, intervalId and counterValue. The initial value for counterValue variable is 0.
In the startCounter() method, we are calling setInterval() method and passing it a delay of 1000 milliseconds. In the callback function, we are incrementing the value of counterValue by 1 and setting it as innerText of the h1 element. We are storing the reference id of this interval in the intervalId variable.
In the stopCounter() method, we are calling clearInterval() method and passing intervalId as a parameter. As a result, it will stop the currently running interval.
We have attached visibilitychange event to the document. In the event handler function, we are using if statement to check whether the document is hidden or not using the hidden property. If true, we will execute stopCounter() method and return. If false, we will execute startCounter() method.

let counter = document.querySelector('h1');


window.addEventListener('DOMContentLoaded', () => {
    startCounter();
})

let intervalId;
let counterValue = 0;

function startCounter(){
    intervalId = setInterval(() => {
        counterValue++;
        counter.innerText = counterValue
    }, 1000);
}

function stopCounter(){
    clearInterval(intervalId);
}

document.addEventListener('visibilitychange', () => {
    if(document.hidden){
        stopCounter();
        return;
    }

    startCounter();
})

You May Also Like: