首頁 > php教程 > PHP开发 > JS 全螢幕及退出全螢幕詳解及實例程式碼

JS 全螢幕及退出全螢幕詳解及實例程式碼

高洛峰
發布: 2016-12-07 15:09:40
原創
1338 人瀏覽過

JS 全螢幕和退出全螢幕

js實現瀏覽器視窗全螢幕和退出全螢幕的功能,市面上主流瀏覽器如:Google、火狐、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>
登入後複製

   


相關標籤:
js
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板