今年3月換了家新公司，為了適應新環境，寫每日技術總結的計划就中止了。現在在新公司兩個多月，還算適應了。解決工作中的問題都不在話下。但總覺得缺少點什么。慢慢開始焦慮，迷茫，不想停留在這種安逸的狀態。
總結一下最近遇到的問題和知識點
1.點擊按鈕觸發瀏覽器全屏顯示
這個功能相當於用戶按下了F11
1.先上【全屏】按鈕和【退出全屏】按鈕（默認隱藏）的html代碼（無關代碼省略）：
<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:
//開啟全屏 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.現在需要在全屏狀態時顯示“退出全屏”按鈕，並隱藏“全屏”按鈕。非全屏狀態時反之。
通過監聽“fullscreenchange”事件實現，js代碼如下：
document.addEventListener("fullscreenchange", function (event) {
if (document.fullscreenElement) {
$('.btn-full').hide();
$('.btn-exit').show();
} else {
$('.btn-full').show();
$('.btn-exit').hide();
}
});
4.相關知識：
（1）什么是document.documentElement?
返回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(); } }
5.參考文檔：
（1）MDN web docs https://developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullscreen