How to detect when a page exits fullscreen?

by

Here’s how I did it:

if (document.addEventListener)
{
 document.addEventListener('fullscreenchange', exitHandler, false);
 document.addEventListener('mozfullscreenchange', exitHandler, false);
 document.addEventListener('MSFullscreenChange', exitHandler, false);
 document.addEventListener('webkitfullscreenchange', exitHandler, false);
}

function exitHandler()
{
 if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement)
 {
  // Run code on exit
 }
}

Supports Opera, Safari, Chrome with webkit, Firefox/Gecko with moz, IE 11 with MSFullScreenChange, and will support the actual spec with fullscreenchange once it’s been successfully implemented in all of the browsers. Obviously, Fullscreen API is only supported in the modern browsers, so I did not provide attachEvent fallbacks for older versions of IE.

More Related Contents:

  1. How to force browser to show image 3 inches wide?
  2. How can I tell if a DOM element is visible in the current viewport?
  3. Communication between tabs or windows
  4. Disabling browser print options (headers, footers, margins) from page?
  5. Appending HTML string to the DOM
  6. How to programmatically empty browser cache?
  7. Browser/HTML Force download of image from src=”data:image/jpeg;base64…”
  8. Detecting if a browser is using Private Browsing mode
  9. Onclick javascript to make browser go back to previous page?
  10. Run a website in fullscreen mode
  11. Detecting if a browser is in full screen mode
  12. How to stop a requestAnimationFrame recursion/loop?
  13. How can I retain the scroll position of a scrollable area when pressing back button?
  14. Target=’_blank’ to show in new window, NOT new tab, possible?
  15. Detect if browser is running on an Android or iOS device
  16. wget + JavaScript?
  17. Browser back button handling
  18. Why does JavaScript navigator.appName return Netscape for Safari, Firefox and Chrome?
  19. Force page zoom at 100% with JS
  20. How to trigger CSS “hover state” using Javascript? [duplicate]
  21. Web browser: Hide mouse cursor [duplicate]
  22. Open Gmail on mailto: action
  23. display HTML page after loading complete
  24. Browsers automatically evaluate hex or hsl colors to rgb when setting via element.style.background?
  25. Could a website force the browser to go into fullscreen mode?
  26. How to make browser full screen using F11 key event through JavaScript [duplicate]
  27. How to reduce the length of a video using JavaScript? [closed]
  28. HTML5 Video autoplay with sound unmuted
  29. How do I dynamically adjust css stylesheet based on browser width?
  30. Is it possible to disable Ctrl + F of find in page?

Leave a Comment