Detect If Browser Tab Has Focus In Javascript

There are a few options we can use in order to Detect If Browser Tab Has Focus In Javascript.

Some of those options are:

1- Detect using visibilitychange event.

const handleVisibilityChange = function() {
    if (document.visibilityState === 'visible') {
        console.log('has focus');
    } else {
        console.log('lost focus');
    }
}
document.addEventListener("visibilitychange", handleVisibilityChange);

In the above code snippet, we’ve attached a listener to the event visibilitychange, and whenever the visibilitychange changed, the handleVisibilityChange function will be triggered and executed.

Inside the handleVisibilityChange function, we’ve a check on the value from document.visibilityState, if it’s equals to 'visible', means the tab is focused, otherwise it’s not.


2- Detect using document.hidden property.

const isFocused = () => typeof document.hidden !== undefined ? !document.hidden : null;

// Call/Use it
isFocused();

The above code snippet does the following:

  • Returns true if the current browser tab is focused.
  • Returns false if the current browser tab is not focused.
  • Returns null if document.hidden is not supported by the user’s browser.

3- Detect using blur/focus events.

function focused() {
    console.log('tab is focused');
}
function notFocused() {
    console.log('tab is not focused');
}

window.addEventListener('blur', notFocused);
window.addEventListener('focus', focused);

In the above code snippet, we’ve attached two listener functions to the events blur and focus.

When the tab is focused, the function focused will be executed in response to the focus event, and we will notice the log statement `console.log('tab is focused')` is executed and showing the message in the console.

Same happens, when the tab loses the focus, the function notFocused would be executed in response to the event blur , and the statement `console.log('tab is not focused')` would be executed.


That’s it for How To Detect If Browser Tab Has Focus In Javascript.

And as always, happy coding!!

Photo from Unsplash.

Related Posts

How to remove highcharts.com credits link

How to remove highcharts.com credits link

Highcharts is a popular JavaScript charting library that offers a wide range of interactive and customizable charts for developers. However, if you’re using the free version of…

Highcharts Place text in the center of a pie chart

Highcharts Place text in the center of a pie chart

To place text in the center of a pie chart in Highcharts, you can use the chart.renderer object to create a custom label and position it in…

Test design breakpoints using jest and react-testing-library

Test responsive design using jest and react-testing-library

Testing design breakpoints in React applications is an important aspect of front-end development. It ensures that the components look and behave as expected on different screen sizes….

Testing React-Query with Jest and React-testing-library

Testing React-Query with Jest and React-testing-library

Introduction In this article we will cover the basic usage of testing useQuery hook from tanstack/react-query library, along with how to test it using jest and react-testing-library….

Highcharts How To Change Series Color with examples

Highcharts How To Change Series Color with examples

To change the color of a series in Highcharts, there are a set of options we are going to discover in this article. Option 1: Using the…

A quick introduction to Javascript shadow DOM

A quick introduction to Javascript shadow DOM

Introduction JavaScript Shadow DOM is a powerful tool for creating isolated and reusable components in web development. It allows developers to create custom elements with their own…

Leave a Reply

%d bloggers like this: