Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
JavaScript: How to return True if the focus is on the browser tab page?
In this article, we will learn to check if the browser tab page is focused and under use or not in JavaScript. This is mainly required to record the user's inactivity time on the app and then take any action upon it if required.
Use Cases for Monitoring Browser Tab Focus
Following are the use cases for monitoring browser tab focus and user inactivity ?
- Prevent sending the network request if the page is not being used by the user as this would reduce the traffic on the server.
- This would help in saving the cost of the servers.
- This is used while monitoring the time spent by each user and then calculating different statistics based on these values.
Different Approaches
Following are the two different approaches to check if the browser tab page is focused and under use or not ?
Using Page Visibility API
The visibility API is provided by HTML 5 which lets the developer know if the tab is currently visible or not. The API sends a visibility change event when the user minimizes the window or switches this window to some other tab. This API adds the below two properties to the DOM object which can be only read.
document.hidden: This property returns false when the current tab is ?visible', else it will return true ?
if (document.hidden) {
document.body.style.backgroundColor = newcolor;
txt.innerText = "Background color has changed !";
}
addEventListener: The addEventListener method is used to attach an event handler to an element. It listens for a specified event on the target element and executes a callback function when the event occurs ?
btn.addEventListener("click", function () {}
Example
Below is an example, for checking if the browser tab page is in focus or not by using the page visibility API ?
<!DOCTYPE html>
<html>
<head>
<title>Page Focus</title>
<style>
.btn_container {
padding: 10px;
text-align: center;
}
#btn {
border-radius: 4px;
cursor: pointer;
padding: 4px 8px;
background-color: white;
font-size: 1.2em;
letter-spacing: 1px;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:green;">Welcome To Tutorials Point</h1>
<h2 id="txt">Switch tab to change the background color.</h2>
<div class="btn_container">
<button id="btn">Original Color</button>
</div>
<script>
const ogcolor = "white";
const newcolor = "#C0C0C0";
const txt = document.getElementById("txt");
const btn = document.getElementById("btn");
document.addEventListener("visibilitychange", function (event) {
if (document.hidden) {
document.body.style.backgroundColor = newcolor;
txt.innerText = "Background color has changed !";
}
});
btn.addEventListener("click", function () {
txt.innerText = "Switch tab to change the background color.";
document.body.style.backgroundColor = ogcolor;
});
</script>
</body>
</html>
Output
Below is the output of the above code ?
Using the window.onfocus and window.onblur Events
These events are useful in JavaScript for detecting when a browser window or tab gains or loses focus. These events help developers trigger specific actions based on whether the user is actively interacting with the page or has shifted their attention elsewhere.
-
window.onfocus ? This event is fired when the tab receives the focus.
- window.onblur ? The blur event is fired when the user performs any action on some other place.
Use window.onblur to detect when the tab loses focus ?
window.onblur = function () {
document.body.style.backgroundColor = newcolor;
txt.innerText = "Background color has changed!";
};
Use window.onfocus to detect when the tab gains focus ?
window.onfocus = function () {
document.body.style.backgroundColor = ogcolor;
txt.innerText = "Switch tab to change the background color.";
};
Example
Below is an example, for checking if the browser tab page is in focus or not by using the onFocus and onBlur methods ?
<!DOCTYPE html>
<html>
<head>
<title>Page Focus</title>
<style>
.btn_container {
padding: 10px;
text-align: center;
}
#btn {
border-radius: 4px;
cursor: pointer;
padding: 4px 8px;
background-color: white;
font-size: 1.2em;
letter-spacing: 1px;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color: green;">Welcome To Tutorials Point</h1>
<h2 id="txt">Switch tab to change the background color.</h2>
<div class="btn_container">
<button id="btn">Original Color</button>
</div>
<script>
const ogcolor = "white";
const newcolor = "#C0C0C0";
const txt = document.getElementById("txt");
const btn = document.getElementById("btn");
// Use window.onblur to detect when the tab loses focus
window.onblur = function () {
document.body.style.backgroundColor = newcolor;
txt.innerText = "Background color has changed!";
};
// Use window.onfocus to detect when the tab gains focus
window.onfocus = function () {
document.body.style.backgroundColor = ogcolor;
txt.innerText = "Switch tab to change the background color.";
};
// Reset button to restore original settings
btn.addEventListener("click", function () {
txt.innerText = "Switch tab to change the background color.";
document.body.style.backgroundColor = ogcolor;
});
</script>
</body>
</html>
Output
Below is the output of the above code ?
Conclusion
In this article, we learned two methods to detect browser tab focus, Page Visibility API that uses document.hidden and the visibilitychange event to track when a tab is visible or hidden. and window.onfocus/window.onblur method detects when a tab gains or loses focus using the onfocus and onblur events. These methods are useful for improving server efficiency, saving resources, and monitoring user inactivity.
1K+ Views
