快捷導(dǎo)航

JavaScript控制瀏覽器全屏顯示簡單示例

更新時間：2018年07月05日 10:46:11 作者：angularWQ

這篇文章主要介紹了JavaScript控制瀏覽器全屏顯示,結(jié)合簡單實例形式分析了JavaScript響應(yīng)鼠標(biāo)事件控制瀏覽器全屏顯示與退出全屏顯示相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了JavaScript控制瀏覽器全屏顯示。分享給大家供大家參考，具體如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>m.fzitv.net JS全屏顯示</title>
</head>
<body>
<div onclick="launchFullscreen(document.documentElement);">全屏顯示</div>
<div onclick="exitFullscreen()(document.documentElement);">退出全屏</div>
  <!--launchFullscreen(document.documentElement);-->
</body>
</html>
<script>
  // 判斷各種瀏覽器，找到正確的方法
  function launchFullscreen(element) {
    if(element.requestFullscreen) {
      element.requestFullscreen();
    } else if(element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if(element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if(element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  }
  // 判斷瀏覽器種類
  function exitFullscreen() {
    if(document.exitFullscreen) {
      document.exitFullscreen();
    } else if(document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if(document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
  // 退出全屏模式!
  exitFullscreen();
</script>

使用本站HTML/CSS/JS在線運行測試工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下測試運行效果：