每日技術總結：點擊按鈕觸發瀏覽器全屏顯示

時間 2020-06-09

原文原文鏈接

今年3月換了家新公司，爲了適應新環境，寫每日技術總結的計劃就停止了。如今在新公司兩個多月，還算適應了。解決工做中的問題都不在話下。但總以爲缺乏點什麼。慢慢開始焦慮，迷茫，不想停留在這種安逸的狀態。javascript

總結一下最近遇到的問題和知識點html

1.點擊按鈕觸發瀏覽器全屏顯示

這個功能至關於用戶按下了F11java

1.先上【全屏】按鈕和【退出全屏】按鈕（默認隱藏）的html代碼（無關代碼省略）：web

<a href="javascript:;" class="btn-full" onclick="launchFullScreen(document.documentElement)">全屏</a>
            <a href="javascript:;" class="btn-exit" onclick="exitFullscreen()" style="display: none;">退出全屏</a>

效果以下，右下角那個「全屏」：瀏覽器

2.開啓全屏和退出全屏的方法js:dom

//開啓全屏
    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(); } } // 退出 fullscreen 
    function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozExitFullScreen) { document.mozExitFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } }

3.如今須要在全屏狀態時顯示「退出全屏」按鈕，並隱藏「全屏」按鈕。非全屏狀態時反之。ide

經過監聽「fullscreenchange」事件實現，js代碼以下：spa

document.addEventListener("fullscreenchange", function (event) { if (document.fullscreenElement) { $('.btn-full').hide(); $('.btn-exit').show(); } else { $('.btn-full').show(); $('.btn-exit').hide(); } });

4.相關知識：code

（1）什麼是document.documentElement?htm

　　返回html dom中的root 節點即<html>

（2）Element.requestFullscreen() MDN文檔： https://developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullScreen

（3）document.exitFullscreen() MDN文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/exitFullscreen

（4）點擊切換全屏模式，一段摘自MDN示例代碼：

// 點擊切換全屏模式
document.onclick = function (event) { if (document.fullscreenElement) { document.exitFullscreen() } else { document.documentElement.requestFullscreen() } };

（5）這兩個API都須要作兼容處理。示例代碼以下：

function toFullVideo(){ if(videoDom.requestFullscreen){ return videoDom.requestFullscreen(); }else if(videoDom.webkitRequestFullScreen){ return videoDom.webkitRequestFullScreen(); }else if(videoDom.mozRequestFullScreen){ return videoDom.mozRequestFullScreen(); }else{ return videoDom.msRequestFullscreen(); } }