Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to check whether or not a browser tab is currently active using JavaScript?
Users can open multiple tabs in the browser, and they can also check if any particular tab is currently active or not in the browser. For example, if you have given a proctored test, you can observe that it detects that tab is changed whenever you change the tab in the browser
So, there can be many applications and uses for checking whether the browser tab is active. This tutorial will teach us two methods to check whether the browser’s tab is active.
Using the onblur() and onfocus() methods of the window object
The window object contains the different methods in JavaScript. The onblur() and onfocus() method is one of them. We can also use the onblur() and onfocus() methods with the HTML elements.
Here, we will use the onblur() and onfocus() methods for a whole window to check whether the tab is changed. When the user changes the tab in the browser, the onblur method invokes, and when the user comes to the currently active tab again, it calls the onfocus() method.
Also, we can override the onblur() and onfocus() methods by assigning the function expression to them using the assignment operation. We can implement whatever we want in the function expression when the user changes the tab.
Syntax
Users can follow the syntax below to use the onblur() and onfocus() methods to check whether the browser’s current tab is active.
window.onblur = function () {
// tab is changed
};
window.onfocus = function () {
// tab is active
};
In the above syntax, we have overridden the onblur() and onfocus() methods by assigning function expressions to them.
Example
In the example below, we created the callFunc(), which will invoke when users click the button. Also, we have overridden the onblur() and onfocus() methods by function expression, which prints a different message when users change the tab and return to the same tab again.
<html>
<body>
<h3>Using the <i> onblur and onfocus method </i> to detect if tab is active or not in the browser using JavaScript.</h3>
<div id = "output"> </div><br>
<button onclick = "callFunc()"> Click to show text </button>
<script>
let output = document.getElementById("output");
function callFunc() {
output.innerHTML += "You have clicked the button! </br>";
}
// The function will invoke when the user changes the tab
window.onblur = function () {
output.innerHTML += "browser tab is changed </br>";
};
// If users come back to the current tab again, the below function will invoke
window.onfocus = function () {
output.innerHTML += "Browser tab is again active! </br>";
};
</script>
</body>
</html>
In the above output, users can see that when they change the tab, it prints the “browser tab is changed!” and if you come back to the current tab again, it prints the “Browser tab is again active!”.
Using the page visibility API to check if the browser’s tab is active or not
In JavaScript, we can use the page visibility API to check whether the current tab is active, closed, or minimized. Whenever the user changes the tab, minimizes it, or opens it again, the visibilitychange event gets triggered in the document.
We can use the addEventListner() method of the document. We can pass the “visibilitychange” event as a first parameter and a callback function as a second parameter to perform some activities when the user changes the tab.
Syntax
Users can follow the syntax below to use the page visibility API to detect the visibility state of the browser’s tab.
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
// tab is changed
} else {
// tab is active
}
});
In the above syntax, we have added the visibilitychage event listener to the webpage.
Parameters
visibilitychange − It is an event that will trigger when the user changes or minimize the tab.
document.hidden − It is a document property that contains the boolean value according to whether the current tab is active.
Example
In the example below, we use the page visibility API explained in the above syntax to check whether the tab is active or closed. Users can change the tab and come back to the tab again can observe the output.
<html>
<body>
<h3>Using the <i> onblur and onfocus method </i> to detect if tab is active or not in the browser using JavaScript.</h3>
<div id = "output"> Tab is active currently! <br /> </div>
<script>
let output = document.getElementById("output");
// add event listeners on the document for the visibilityChange event
document.addEventListener("visibilitychange", () => {
// use the document's hidden property to check if the current tab is active!
if (document.hidden) {
output.innerHTML += "browser tab is changed </br>";
} else {
output.innerHTML += "Browser tab is again active! </br>";
}
});
</script>
</body>
</html>
In this tutorial, users learned to detect the active tab in the browser. Youtube also uses the same method to check whether you are currently watching the video in the tab. If you keep the browser open for a while, your computer automatically goes to sleep mode, but when you are watching YouTube, it doesn’t.
13K+ Views
