JS控制全屏，监听退出全屏事件

您所在的位置：网站首页 › 键盘如何退出全屏 › JS控制全屏，监听退出全屏事件

JS控制全屏，监听退出全屏事件

2023-06-08 07:54| 来源: 网络整理| 查看: 265

先放個官方 Web API 接口链接：全屏 API

网上基本都是这种：

//全屏功能 document.getElementById("ck_buts").onclick = function() { var elem = document.getElementById("dashboard_id"); elem.style.width = "100%"; elem.style.height = "100%"; elem.style.overflowY = "scroll"; requestFullScreen(elem); // 某个页面元素 //requestFullScreen(document.documentElement); // 整个网页 }; function requestFullScreen(element) { // 判断各种浏览器，找到正确的方法 var requestMethod = element.requestFullScreen || //W3C element.webkitRequestFullScreen || //FireFox element.mozRequestFullScreen || //Chrome等 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 || //FireFox document.webkitExitFullscreen || //Chrome等 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}"); } } }

监听退出全屏事件：

//监听退出全屏事件 window.onresize = function() { if (!checkFull()) { //要执行的动作 $("#dashboard_id").removeClass('expand').addClass('contract');//这里捡个懒，直接用JQ来改className } } function checkFull() { var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled; //to fix : false || undefined == undefined if (isFull === undefined) {isFull = false;} return isFull; }

我试了试，无法正常监听退出全屏事件（Esc、F11）。

注：全屏状态无法监听键盘按键事件。

故：采用监听onresize ，onresize 事件会在窗口或框架被调整大小时发生。

window.onresize = function() { if (document.fullscreenElement) { console.log('进入全屏') } else { // TODO... console.log('退出全屏') } };

Ok！！！

【本文地址】

JS控制全屏，监听退出全屏事件

JS控制全屏，监听退出全屏事件

今日新闻

推荐新闻