requestFullScreen() 方法

admin發表於2019-05-25

此方法發出一個使元素進入全屏狀態的非同步請求。

如果進入全屏狀態成功，那麼會觸發document物件的fullscreenchange事件。

如果進入全屏狀態失敗，那麼會觸發document物件的fullscreenerror事件。

語法結構:

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

特別說明:

（1）.包含在頂層文件的標準HTML元素、<svg>元素和<math>元素可以進入全屏狀態。

（2）.預設，<iframe>和<object>內部的元素不能進入全屏狀態。

（3）.<iframe>引用的文件中具有allowfullscreen屬性的元素可以進入全屏狀態。

瀏覽器支援:

（1）.IE11瀏覽器支援此屬性（加ms字首）。

（2）.edge瀏覽器支援此屬性（無需加字首）。

（3）.谷歌瀏覽器支援此屬性（加webkit字首）。

（4）.opera瀏覽器支援此屬性（無需加字首）。

（5）.火狐瀏覽器支援此屬性（加moz字首）。

（6）.safria瀏覽器支援此屬性（加webkit字首）。

特別說明:IE11瀏覽器中，screen中的s為小寫，即msRequestFullscreen()，否則無效。

程式碼例項:

[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>

上面的程式碼可以將div元素設定為全屏效果。

相關文章