今年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