How to detect browser “minimized” and “maximized” state in JavaScript? [duplicate]

by

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.

More Related Contents:

  1. How to write recursive function javascript push my array property Json object?
  2. ES6 Modules: Undefined onclick function after import
  3. “this” is undefined inside map function Reactjs
  4. Current time formatting with Javascript
  5. React component initialize state from props
  6. Javascript decoding html entities [duplicate]
  7. How do I do string replace in JavaScript to convert ‘9.61’ to ‘9:61’?
  8. jQuery “on create” event for dynamically-created elements
  9. How to dynamically create ‘@-Keyframe’ CSS animations?
  10. Check Ctrl / Shift / Alt keys on ‘click’ event
  11. How to send variables from one file to another in Javascript? [duplicate]
  12. How do I load my script into the node.js REPL?
  13. Why is isNaN(null) == false in JS?
  14. Is it possible to create a “weak reference” in JavaScript?
  15. How can I get a list of the differences between two JavaScript object graphs?
  16. Why comma ‘ , ‘ and plus ‘ + ‘ log the console output in different pattern?
  17. In JavaScript, how can I have a function run at a specific time?
  18. How to convert comma separated string into numeric array in javascript
  19. JavaScript adding a string to a number
  20. AngularJS error: ‘argument ‘FirstCtrl’ is not a function, got undefined’
  21. jQuery DataTables “No Data Available in Table”
  22. Angular ui router – Redirection doesn’t work at all
  23. How to send data from HTML form to Google Spreadsheet using JavaScript?
  24. HTML5 input required, scroll to input with fixed navbar on submit
  25. Function not calling within an onclick event
  26. Set cookie on multiple domains with PHP or JavaScript
  27. Computed properties in Backbone
  28. Get Element StyleSheet Style in JavaScript
  29. How to import a js library without definition file in typescript file
  30. Is there a way to catch an attempt to access a non existant property or method?

Leave a Comment