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.