How to detect browser "minimized" and "maximized" state in JavaScript?

javascript

Solution

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.

Problem

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?

Original source

Related problems