Fortunately, there are functions that can help you check if a Window has focus using JavaScript. We will help you to do this using three different functions, namely hasFocus(), addEventListener() and document.visibilityState. Each way is somehow easy, so feel free to decide between options.
Check if a window has focus using JavaScript
Using hasFocus()
Syntax:
document.hasFocus()
The hasFocus() function method returns true when the window has focus, and false when the window not. Its syntax and usage are defined above. The hasFocus() method will help you check if a window has focus using JavaScript. By calling these method directly on the document object, for example:
<html>
<body>
<h1 id = "learnshareit"> LearnShareIT window not has focus </h1>
<script type="text/javascript">
function checkIfWindowHasFocus(){
document.getElementById("learnshareit").innerHTML = document.hasFocus()?"LearnShareIT has focus":"LearnShareIT not has focus"
}
setInterval(checkIfWindowHasFocus, 2);
</script>
</body>
</html>Output:
You can easily see how it works by clicking the button Execute code (
) in our editor above.
As you can see, this method will change the heading from “not focus” to “has focus” whenever you click or focus to that page. However, this method doesn’t work in some smartphone browsers, such as Android. If you want to support all browsers, you should read the next solution instead.
Using addEventListener()
In many old browsers, the previous method doesn’t work effectively. Instead, you can use the addEventListener() with two events namely focus and focusout.
Syntax:
window.addEventListener(event,function)
Parameters:
- event: name of the event.
- function: the function that do the actions when the given event fires.
For example:
<html>
<body>
<h1 id = "learnshareit"> LearnShareIT window not has focus </h1>
<script type="text/javascript">
window.addEventListener('focus', function () {
document.getElementById("learnshareit").innerHTML += "<br>LearnShareIT has focus"
})
</script>
</body>
</html>Output:
You can easily see how it works by clicking the button Execute code () in our editor above. However, you should use the document.visibilityState property in the next solution if you want to verify that the content of the page is visible and the user can see it, such as the window must not be minimized or the user doesn’t have another tab open in a same window.
Using document.visibilityState
Syntax:
document.visibilityState
According to the JavaScript documentation, this property does not make sure the window has focus or not. Instead, it checks the visibility of the document, whether you can see the document on the screen or not.
<html>
<body>
<h1 id = "learnshareit">LearnShareIT</h1>
<script type="text/javascript">
function checkIfWindowHasFocus(){
document.visibilityState==="visible"?console.log("LearnShareIT window is visible"):console.log("LearnShareIT window is invisible")
}
setInterval(checkIfWindowHasFocus, 2000);
</script>
</body>
</html>Output:
LearnShareIT window is visible
LearnShareIT window is invisible
LearnShareIT window is visibleYou can click execute the code and then open the console log and click another tab on your browser (or create a new tab), after 5 seconds go back here and you will find that the console prints out the “invisibility” keyword.
Summary
We have helped you check if a Window has Focus using JavaScript using three different ways. Although there are many methods to do this, we suggest you use the first solution which is hasFocus() method as it works for every browser nowadays. Good luck for you!
Maybe you are interested:
- Remove the focus from an Element using JavaScript
- Detect if a Browser tab has Focus using JavaScript
I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R
