25

I am trying to find the browser minimized and maximized states, as I want to hit the AJAX request accordingly the browser state.

Does anyone know how do I detect the browser state using JavaScript?

informatik01
  • 16,038
  • 10
  • 74
  • 104
Ashish
  • 923
  • 2
  • 11
  • 16

4 Answers4

37

I think the only reliable way to detect these states is to check the visibility API offered by HTML5 (this is still an experimental feature) which offers certain properties and events

document.hidden // Returns true if the page is in a state considered to be hidden to the user, and false otherwise.

document.visibilityState // Returns a string denoting the visibility state of the document

You can also react on changes of the visibility

document.addEventListener("visibilitychange", function() {
  console.log(document.hidden, document.visibilityState);
}, false);

Keep in mind this is not working cross browser and only available in certain browser versions.

Tobias Krogh
  • 3,768
  • 20
  • 14
  • While window.resize fails on OSX to notice a "reduced to dock" (iconify/minimize) and "restored from dock" (restore) operation, this technique you've shown here appears to work. Good job! – Volomike Apr 19 '16 at 01:09
  • This doesn't seem to detect clicking off the window and focusing another way, but maybe that is the intended behaviour – David Callanan Jan 16 '20 at 17:44
  • 2
    @DavidCallanan That is a different property, which is called focus. Check `document.hasFocus()` and the `window`'s `focus` event. – Drakinite Jun 29 '21 at 21:10
6

I use this code

window.addEventListener('blur', function(){
   console.log('blur');
}, false);

window.addEventListener('focus', function(){
   console.log('focus');
}, false);
Justan
  • 71
  • 1
5

Here's Piotrek De's answer on another question:

There is a neat library available on GitHub:

https://github.com/serkanyersen/ifvisible.js

Example:

// If page is visible right now
if( ifvisible.now() ){
  // Display pop-up
  openPopUp();
}

I've tested version 1.0.1 on all browsers I have and can confirm that it works with:

  • IE9, IE10
  • FF 26.0
  • Chrome 34.0

and probably all newer versions.

Doesn't fully work with:

  • IE8 - always indicate that tab/window is currently active (.now() always returns true for me)
Community
  • 1
  • 1
user1089766
  • 597
  • 6
  • 14
2

You can try with Page Visibility API, it has the boolean property document.hidden (document.webkitHidden), which also detects whether current page is minimized or maximized. It is also dependant whether user has focused current browser tab or not:

https://developers.google.com/chrome/whitepapers/pagevisibility

https://developer.mozilla.org/en/DOM/Using_the_Page_Visibility_API

Samuli Hakoniemi
  • 18,740
  • 1
  • 61
  • 74
  • In my case the Page Visibility API does not change state when I minimize the browser or press alt tab. Is this an expected behavior because if I minimize the browser its basically in the hidden state, right? – Sachin Oct 11 '13 at 13:42