Check if a Window has Focus using JavaScript

avatar

Borislav Hadzhiev

Mon Jan 10 20223 min read

banner

Photo by Joshua Earle

Check if a Window has Focus using JavaScript #

Use the document.hasFocus() method to check if a window has focus, e.g. if (document.hasFocus()) {}. The method returns a boolean value indicating whether the document or any element in the document has focus.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box">Box content</div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
// ✅ Check if window focused if (document.hasFocus()) { console.log('✅ window has focus'); } else { console.log('⛔️ window does NOT have focus'); } // ✅ Check if window focused EVERY 1.5 seconds function checkWindowFocused() { if (document.hasFocus()) { console.log('✅ window has focus'); document.body.style.backgroundColor = 'lime'; document.getElementById('box').textContent = 'Window has focus'; } else { console.log('⛔️ window does NOT have focus'); document.body.style.backgroundColor = 'salmon'; document.getElementById('box').textContent = 'Window does NOT have focus'; } } setInterval(checkWindowFocused, 1500); // 👉️ check if focused every 1.5 seconds

We used the document.hasFocus method to check if the document or any of the elements inside it has focus.

The document.hasFocus method returns a boolean value:

  • true if the document has focus
  • false if it doesn't

The second code snippet in the example uses the setInterval method to check if the window has focus every 1.5 seconds.

The two parameters we passed to the setInterval method are:

  1. A function that gets invoked every X milliseconds.
  2. The time, in milliseconds, between invocations of the function.

If I open the example in my browser I can see that every time I click off the document, the document.hasFocus method returns false.

check if window focused

If you need to check if the page content is visible to the user, e.g. the window is not minimized and the user has not opened a different tab in the same window, use the document.visibilityState property.
index.js
function checkDocumentVisible() { if (document.visibilityState === 'visible') { console.log('✅ page is in the foreground tab of a non-minimized window'); document.body.style.backgroundColor = 'lime'; document.getElementById('box').textContent = '✅ page is in the foreground tab of a non-minimized window'; } else { console.log( '⛔️ document is in background tab or part of a minimized window', ); document.body.style.backgroundColor = 'salmon'; document.getElementById('box').textContent = '⛔️ document is in background tab or part of a minimized window'; } } setInterval(checkDocumentVisible, 1500);

When using the code snippet above, the document.visibilityState property will return visible as long as the page is in the foreground tab of a non-minimized window

If the page content is not visible to the user, e.g. in a minimized window, or an inactive tab in the same window, the visibilityState property returns hidden.

You can also add an event listener to track changes in the visibility.

index.js
function checkDocumentVisible() { if (document.visibilityState === 'visible') { console.log('✅ page is in the foreground tab of a non-minimized window'); document.body.style.backgroundColor = 'lime'; document.getElementById('box').textContent = '✅ page is in the foreground tab of a non-minimized window'; } else { console.log( '⛔️ document is in background tab or part of a minimized window', ); document.body.style.backgroundColor = 'salmon'; document.getElementById('box').textContent = '⛔️ document is in background tab or part of a minimized window'; } } // ✅ Add event listener document.addEventListener('visibilitychange', checkDocumentVisible);

We used the visibilitychange event.

The event is fired at the document when the contents of its tab have become visible or have been hidden.

If you minimize the window or switch to a different tab, you'll see the visibilitychange event fire.

Use the search field on my Home Page to filter through my more than 1,000 articles.