欢迎光临
我们一直在努力

jquery让浏览器全屏,js处理谷歌浏览器弹出确定框

1. 问题说明

网页全屏和退出全屏其实已经算的上一个很常见的功能了,那是不是直接用HTML5全屏API就没什么问题了,但是不要忘了键盘上的F11有着同样的功能,实际使用的时候就发现F11使网页进入全屏后,以HTML5的全屏API退出全屏就不管用了(不是一家,没商量好啊!)

2.页面全屏与退出全屏 // 根据浏览器可视区域高度与屏幕实际高度差值判断页面是否为全屏状态 // 取值17是为了处理页面内容出现滚动条的情况var isFull = Math.abs(window.screen.height-window.document.documentElement.clientHeight) <= 17 window.onresize = function () { isFull = Math.abs(window.screen.height-window.document.documentElement.clientHeight) <= 17} // 阻止F11键默认事件,用HTML5全屏API代替window.addEventListener(‘keydown’, function (e) { e = e || window.event if (e.keyCode===122 && !isFull) { e.preventDefault() enterFullScreen() }}) // 打开浏览器全屏模式 function enterFullScreen () { let el = document.documentElement let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen if (rfs) { // typeof rfs != “undefined” && rfs rfs.call(el) } else if (typeof window.ActiveXObject !== ‘undefined’) { // for IE,这里其实就是模拟了按下键盘的F11,使浏览器全屏 let wscript = new ActiveXObject(‘WScript.Shell’) if (wscript != null) { wscript.SendKeys(‘{F11}’) } } } // 退出全屏 function exitFullScreen () { let el = document let cfs = el.cancelFullScreen || el.mozCancelFullScreen || el.msExitFullscreen || el.webkitExitFullscreen 便宜香港vps || el.exitFullscreen if (cfs) { // typeof cfs != “undefined” && cfs cfs.call(el) } else if (typeof window.ActiveXObject !== ‘undefined’) { // for IE,这里和fullScreen相同,模拟按下F11键退出全屏 let wscript = new ActiveXObject(‘WScript.Shell’) if (wscript != null) { wscript.SendKeys(‘{F11}’) } } }, 3.问题解析

Document.exitFullscreen() 方法用于让当前文档退出全屏模式(原文表述不准确,详见备注)。调用这个方法会让文档回退到上一个调用Element.requestFullscreen()方法进入全屏模式之前的状态。

备注: 如果一个元素A在请求进去全屏模式之前,已经存在其他元素处于全屏状态,当这个元素A退出全屏模式之后,之前的元素仍然处于全屏状态。浏览器内部维护了一个全屏元素栈用于实现这个目的。

document.exitFullScreen()实际作用说明

此文章为开发实际遇到问题记录,也是希望能帮助到遇到同类问题的码农们,如有描述错误,欢迎各位指正,看到必定更正!

07181836

赞(0)
【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。