Question

根据here中给出的答案，使用'document.msFullscreenElement！== null'：

我正在尝试检测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>

但是，无论浏览器是否处于全屏状态，警报的结果都是假的。据推测，我误解了这意味着如何应用？

Answer 1

元素进入或退出全屏模式后会触发MSFullscreenChange event，因此您可以获取当前状态。在该示例中，我们检查msFullscreenElement以查看是否有任何元素全屏显示。如果元素处于全屏模式，则返回该元素，否则msFullscreenElement返回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");
    }
  });
}

如何使用document.msFullscreenElement检测全屏！== null（使用javascript）

1 个答案: