每日技术总结：点击按钮触发浏览器全屏显示

时间 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(); } }

5.参考文档：

（1）MDN web docs https://developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullscreen