fullscreenchange 事件

admin發表於2019-05-25
事件

當在全屏模式下顯示元素或元素退出全屏模式時會觸發此事件。

此事件屬於document物件。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
targetDocument.onfullscreenchange = fullscreenChangeHandler

程式碼例項:

[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">
document.addEventListener("fullscreenchange", function (event) {
  console.log("fullscreenchange", event);
});
document.addEventListener("mozfullscreenchange", function (event) {
  console.log("mozfullscreenchange ", event);
});
document.addEventListener("webkitfullscreenchange", function (event) {
  console.log("webkitfullscreenchange", event);
});
document.addEventListener("msfullscreenchange", function (event) {
  console.log("msfullscreenchange", event);
});

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>

上面的程式碼演示了fullscreenchange事件的功能，在不同的瀏覽器中，需要帶有各自的廠商字首。

相關文章