JS 全屏和退出全屏详解及实例代码

2019-11-19 19:02:36

字体：大中小

来源：转载

供稿：网友

JS 全屏和退出全屏

js实现浏览器窗口全屏和退出全屏的功能，市面上主流浏览器如：谷歌、火狐、360等都是兼容的，不过IE低版本有点瑕疵（全屏状态下仍有底部的状态栏）。

这个demo基本是够了，直接复制下面的源码另存为html文件看效果吧。

<!DOCTYPE html><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js全屏和退出全屏代码</title><body><!-- requestFullScreen(document.documentElement): 整个网页进入全屏  requestFullScreen(document.getElementById("video-box")): 指定某块区域全屏 --><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>

感谢阅读，希望嫩帮助到大家，谢谢大家对本站的支持！

以下是其它网友的补充

我们知道，浏览器全屏通常按快捷键F11。JS控制浏览器全屏也不稀奇，它让Web应用看上去更像似原生软件应用效果。比如点餐系统、叫号系统等等。

JS让浏览器全屏及退出全屏的方法网上很多，这不是重点，重点是需注意：浏览器全屏只能通过鼠标手势点击事件去触发。

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"上执行"requestFullscreen"方法失败，javascript API仅允许通过手势去创建！（即没有权限）

通常是由于程序员想触发浏览器自动全屏显示而导致。但是很抱歉，此方法行不通，必须通过手势去创建，哪怕onload、trigger()、mouseover也触发不了！

官方解释

该Element.requestFullscreen()方法发出异步请求，使元素全屏显示。但不能保证元素将被放入全屏模式。

如果允许进入全屏模式，文档将收到一个fullscreenchange事件，让它知道它现在处于全屏模式。如果权限被拒绝，则文档会接收到一个fullscreenerror事件。

结论

可能出于用户操作体验的考虑吧，客户端javascript让浏览器全屏只能通过鼠标手势点击事件去触发，即click()。

上一篇：jquery文字填写自动高度的实现方法

下一篇：easyui tree带checkbox实现单选的简单实例