exitFullscreen() 方法

admin發表於2019-05-25

此方法可以退出文件的全屏狀態。

如果一個元素A在請求進去全屏模式之前，已經存在其他元素處於全屏狀態，當這個元素A退出全屏模式之後，之前的元素仍然處於全屏狀態。瀏覽器內部維護了一個全屏元素棧用於實現這個目的。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
document.exitFullscreen();

瀏覽器支援:

（1）.IE瀏覽器不支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.opera瀏覽器不支援此屬性。

（5）.火狐瀏覽器支援此屬性。

（6）.safria瀏覽器不支援此屬性。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html lang="zh-cn">

<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.fullScreen {
  width: 600px; 
  height: 350px; 
  text-align:center;
  line-height:350px;
}
#top {
  background-color: red;
}
#bottom {
  background-color: green;
}
</style>
<script type="text/javascript">
window.onload = function () {
  var inFullScreen = false;

  var fsClass = document.getElementsByClassName("fullScreen");
  for (var i = 0; i < fsClass.length; i++) {
    fsClass[i].addEventListener("click", function (evt) {
      if (inFullScreen == false) {
        makeFullScreen(evt.target);
      } else {
        reset();
      }
    }, false);
  }
  function makeFullScreen(divObj) {
    if (divObj.requestFullscreen) {
      divObj.requestFullscreen();
    }
    else if (divObj.msRequestFullscreen) {
      divObj.msRequestFullscreen();
    }
    else if (divObj.mozRequestFullScreen) {
      divObj.mozRequestFullScreen();
    }
    else if (divObj.webkitRequestFullscreen) {
      divObj.webkitRequestFullscreen();
    }
    inFullScreen = true;
    return;
  }

  function reset() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
    else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
    inFullScreen = false;
    return;
  }
}
</script>
</head>
<body>
<div id="top" class="fullScreen">螞蟻部落一</div>
<div id="bottom" class="fullScreen">螞蟻部落二</div>
</body>
</html>

上面的程式碼演示了退出全屏效果。

相關文章