首頁 > 文章 > web前端 > JS 全螢幕和退出全螢幕詳解（含代碼）

JS 全螢幕和退出全螢幕詳解（含代碼）

亚连原創: 2018-05-19 14:20:229242瀏覽

退出全螢幕效果與全螢幕效果我們可能在看影片網站時看到多,這裡來為各位介紹利用js全螢幕和退出全螢幕程式碼範例吧，,需要的朋友可以參考下

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>

我們知道，瀏覽器全螢幕通常按快捷鍵F11。 JS控制瀏覽器全螢幕也不稀奇，它讓網頁應用程式看起來更像似原生軟體應用程式效果。例如點餐系統、叫號系統等等。

JS讓瀏覽器全螢幕及退出全螢幕的方法網路上很多，這不是重點，重點是需注意：瀏覽器全螢幕只能透過滑鼠手勢點擊事件去觸發。

JS全螢幕方法

var $fullScreen = document.getElementById("js-fullScreen");//按钮 
if ($fullScreen) { 
  $fullScreen.addEventListener("click", function () { 
    var docElm = document.documentElement; 
    if (docElm.requestFullscreen) { 
      docElm.requestFullscreen(); 
    } 
    else if (docElm.msRequestFullscreen) { 
      docElm.msRequestFullscreen(); 
    } 
    else if (docElm.mozRequestFullScreen) { 
      docElm.mozRequestFullScreen(); 
    } 
    else if (docElm.webkitRequestFullScreen) { 
      docElm.webkitRequestFullScreen(); 
    } 
  }, false); 
}

#JS退出全螢幕方法

var $cancelFullScreen = document.getElementById("js-cancelFullScreen"); 
if ($cancelFullScreen) { 
  $cancelFullScreen.addEventListener("click", function () { 
    if (document.exitFullscreen) { 
      document.exitFullscreen(); 
    } 
    else if (document.msExitFullscreen) { 
      document.msExitFullscreen(); 
    } 
    else if (document.mozCancelFullScreen) { 
      document.mozCancelFullScreen(); 
    } 
    else if (document.webkitCancelFullScreen) { 
      document.webkitCancelFullScreen(); 
    } 
  }, false); 
}

#控制台警告

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

釋義：在"Element"上執行"requestFullscreen"方法失敗，javascript API僅允許透過手勢去建立！（即沒有權限）

通常是由於程式設計師想要觸發瀏覽器自動全螢幕顯示而導致。但很抱歉，此方法行不通，必須透過手勢去創建，即使是onload、trigger()、mouseover也觸發不了！

官方解釋

該Element.requestFullscreen()方法發出非同步請求，使元素全螢幕顯示。但不能保證元素會被放入全螢幕模式。

如果允許進入全螢幕模式，文件將收到fullscreenchange事件，讓它知道它現在處於全螢幕模式。如果權限被拒絕，則文件會接收到一個fullscreenerror事件。

結論

可能出於使用者操作體驗的考量吧，客戶端javascript讓瀏覽器全螢幕只能透過滑鼠手勢點擊事件去觸發，也就是click() 。

上面是我整理給大家的，希望今後對大家有幫助。

Nodejs Electron ubuntu安裝步驟詳解

原生JS AJAX做出三級連動效果（附程式碼）

Vue.js雙向綁定實作步驟說明

以上是JS 全螢幕和退出全螢幕詳解（含代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Javascript數組迴圈遍歷（forEach詳解）下一篇：Javascript數組迴圈遍歷（forEach詳解）

看更多