DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JS 全屏和退出全屏詳解及實例代碼
JS 全屏和退出全屏詳解及實例代碼
編輯:JavaScript基礎知識     

JS 全屏和退出全屏

js實現浏覽器窗口全屏和退出全屏的功能,市面上主流浏覽器如:谷歌、火狐、360等都是兼容的,不過IE低版本有點瑕疵(全屏狀態下仍有底部的狀態欄)。

這個demo基本是夠了,直接復制下面的源碼另存為html文件看效果吧。

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js全屏和退出全屏代碼</title>
<body>
<!-- requestFullScreen(document.documentElement): 整個網頁進入全屏
   requestFullScreen(document.getElementById("video-box")): 指定某塊區域全屏
 -->
<button onclick="requestFullScreen(document.documentElement)">全屏顯示</button>
<button onclick="exitFull()">退出全屏</button>
</body>
<script type="text/javascript">
function requestFullScreen(element) {
  // 判斷各種浏覽器,找到正確的方法
  var requestMethod = element.requestFullScreen || //W3C
  element.webkitRequestFullScreen ||  //Chrome等
  element.mozRequestFullScreen || //FireFox
  element.msRequestFullScreen; //IE11
  if (requestMethod) {
    requestMethod.call(element);
  }
  else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
    var wscript = new ActiveXObject("WScript.Shell");
    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}

//退出全屏 判斷浏覽器種類

function exitFull() {
  // 判斷各種浏覽器,找到正確的方法
  var exitMethod = document.exitFullscreen || //W3C
  document.mozCancelFullScreen ||  //Chrome等
  document.webkitExitFullscreen || //FireFox
  document.webkitExitFullscreen; //IE11
  if (exitMethod) {
    exitMethod.call(document);
  }
  else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
    var wscript = new ActiveXObject("WScript.Shell");
    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}
</script>
</html>



感謝閱讀,希望嫩幫助到大家,謝謝大家對本站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved