1

Using 'document.msFullscreenElement !== null', as per the answer given in here:

I am trying to detect if a page is in Fullscreen mode in IE11:

<!DOCTYPE html>
<head>
<title>Detect Fullscreen</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var inFullscreen = document.msFullscreenElement !== null; 
alert("inFullscreen is " + inFullscreen);
</script>
</head>
<body>
<p>Detect Fullscreen in IE11</p>
</body>
</html>

However, the outcome of the alert is false whether or not the browser is in fullscreen. Presumably I misunderstand how this meant to be applied?

Community
  • 1
  • 1
martin
  • 393
  • 1
  • 6
  • 21
  • It's false because `msFullscreenElement` is probably not `null` but `undefined` – if somebody still sees this, use `!=` instead of `!==`. – biziclop Sep 29 '22 at 04:08

1 Answers1

2

The MSFullscreenChange event is fired after an element enters or exits full-screen mode, so you can get the current state. In the example, we check the msFullscreenElement to see if any elements are in full screen. If an element is in full-screen mode, the element is returned, otherwise msFullscreenElement returns null. 

if (document.requestFullscreen) {
  document.addEventListener("fullscreenchange", function () {
    if (document.fullscreenElement != null) {
      console.info("Went full screen");
    } else {
      console.info("Exited full screen");
    }
  });
}
else if (document.msRequestFullscreen) {
  document.addEventListener("MSFullscreenChange", function () {
    if (document.msFullscreenElement != null) {
      console.info("Went full screen");
    } else {
      console.info("Exited full screen");
    }
  });
}
etr
  • 1,252
  • 2
  • 8
  • 15
  • etr - thanks very much, if I replace the script in my example with yours and also change console.info to alert, should I be able to see an alert coming up as I enter and leave fullscreen, I am not having any success? – martin Jul 18 '14 at 15:18