快捷導(dǎo)航

JS 全屏和退出全屏詳解及實(shí)例代碼

更新時(shí)間：2016年11月07日 10:03:47 投稿：lqh

退出全屏效果與全屏效果我們可能在看視頻網(wǎng)站時(shí)看到多,這里來為各位介紹利用js全屏和退出全屏代碼范例吧，,需要的朋友可以參考下

JS 全屏和退出全屏

js實(shí)現(xiàn)瀏覽器窗口全屏和退出全屏的功能，市面上主流瀏覽器如：谷歌、火狐、360等都是兼容的，不過IE低版本有點(diǎn)瑕疵（全屏狀態(tài)下仍有底部的狀態(tài)欄）。

這個(gè)demo基本是夠了，直接復(fù)制下面的源碼另存為html文件看效果吧。

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js全屏和退出全屏代碼</title>
<body>
<!-- requestFullScreen(document.documentElement): 整個(gè)網(wǎng)頁進(jìn)入全屏
  requestFullScreen(document.getElementById("video-box")): 指定某塊區(qū)域全屏
 -->
<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>

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

以下是其它網(wǎng)友的補(bǔ)充

我們知道，瀏覽器全屏通常按快捷鍵F11。JS控制瀏覽器全屏也不稀奇，它讓W(xué)eb應(yīng)用看上去更像似原生軟件應(yīng)用效果。比如點(diǎn)餐系統(tǒng)、叫號系統(tǒng)等等。

JS讓瀏覽器全屏及退出全屏的方法網(wǎng)上很多，這不是重點(diǎn)，重點(diǎn)是需注意：瀏覽器全屏只能通過鼠標(biāo)手勢點(diǎn)擊事件去觸發(fā)。

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"上執(zhí)行"requestFullscreen"方法失敗，javascript API僅允許通過手勢去創(chuàng)建！（即沒有權(quán)限）

通常是由于程序員想觸發(fā)瀏覽器自動全屏顯示而導(dǎo)致。但是很抱歉，此方法行不通，必須通過手勢去創(chuàng)建，哪怕onload、trigger()、mouseover也觸發(fā)不了！

官方解釋

該Element.requestFullscreen()方法發(fā)出異步請求，使元素全屏顯示。但不能保證元素將被放入全屏模式。

如果允許進(jìn)入全屏模式，文檔將收到一個(gè)fullscreenchange事件，讓它知道它現(xiàn)在處于全屏模式。如果權(quán)限被拒絕，則文檔會接收到一個(gè)fullscreenerror事件。

結(jié)論

可能出于用戶操作體驗(yàn)的考慮吧，客戶端javascript讓瀏覽器全屏只能通過鼠標(biāo)手勢點(diǎn)擊事件去觸發(fā)，即click()。

您可能感興趣的文章: