Come rilevare il browser minimizzare e massimizzare lo stato in javascript

Sto cercando di trovare il browser minimizzare e massimizzare gli stati, in quanto voglio colpire la richiesta AJAX di conseguenza lo stato del browser.

Qualcuno sa come faccio a rilevare lo stato del browser utilizzando JavaScript.

Penso che l’unico modo affidabile per rilevare questi stati sia controllare l’ API di visibilità offerta da HTML5 (questa è ancora una funzionalità sperimentale) che offre determinate proprietà ed eventi

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 

Puoi anche reactjs ai cambiamenti della visibilità

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

Tieni presente che non funziona su browser cross e disponibile solo in alcune versioni del browser.

Ecco la risposta di Piotrek De su un’altra domanda :

C’è una biblioteca pulita disponibile su GitHub:

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

Esempio:

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

Ho provato la versione 1.0.1 su tutti i browser che ho e posso confermare che funziona con:

  • IE9, IE10
  • FF 26.0
  • Chrome 34.0

e probabilmente tutte le versioni più recenti.

Non funziona completamente con:

  • IE8: indica sempre che la scheda / finestra è attualmente triggers (.now () restituisce sempre true per me)

Io uso questo codice

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

Puoi provare con l’API di visibilità delle pagine, ha la proprietà booleana document.hidden (document.webkitHidden), che rileva anche se la pagina corrente è ridotta a icona o ingrandita. Dipende anche dal fatto che l’utente abbia focalizzato o meno la scheda corrente del browser:

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

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