js实现全屏与退出全屏，解决F11进入全屏后退出全屏API方法失效（chrome）

解决的问题
谷歌浏览器F11全屏后，在页面中编写的全屏按钮失效
解决方法

//判断是否是全屏状态
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.eventif (e.keyCode===122 && !isFull) {e.preventDefault()enterFullScreen()}
})// 打开浏览器全屏模式
function enterFullScreen () {let el = document.documentElementlet rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreenif (rfs) { // typeof rfs != "undefined" && rfsrfs.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 = documentlet cfs = el.cancelFullScreen || el.mozCancelFullScreen || el.msExitFullscreen || el.webkitExitFullscreen || el.exitFullscreenif (cfs) { // typeof cfs != "undefined" && cfscfs.call(el)} else if (typeof window.ActiveXObject !== 'undefined') {// for IE，这里和fullScreen相同，模拟按下F11键退出全屏let wscript = new ActiveXObject('WScript.Shell')if (wscript != null) {wscript.SendKeys('{F11}')}}
}//以下调用代码根据情况自己改写//绑定页面全屏按钮的点击事件
handler : function() {switchFullScreen();
}//调用方法
switchFullScreen : function() {if (isFull) {exitFullScreen();} else {enterFullScreen();}
}

js实现全屏与退出全屏，解决F11进入全屏后退出全屏API方法失效（chrome）相关推荐

计算机断电后黑屏怎么办,如何解决win7系统电脑开机后断电黑屏的故障
很多用户都曾碰到过断电的情况,这种现象是不再我们控制范围内的.对此,很多用户表示电脑在正常状态下断电重启后出现黑屏,这是怎么回事呢?电脑没有任何反应,电源指示灯熄灭,重启在开机故障依旧,该如何解决这个 ...
oracle查看登录时间黑屏,oracle 11g默认用户名、密码解锁以及安装后重启黑屏问题.doc...
oracle 11g默认用户名.密码解锁以及安装后重启黑屏问题.doc 还剩 3页未读, 继续阅读下载文档到电脑,马上远离加班熬夜! 亲,喜欢就下载吧,价低环保! 内容要点: 遇的同学,参考一下解 ...
js实现浏览器全屏与退出全屏，解决chrome下F11进入全屏后退出全屏API方法失效
1. 问题说明网页全屏和退出全屏其实已经算的上一个很常见的功能了,那是不是直接用HTML5全屏API就没什么问题了,但是不要忘了键盘上的F11有着同样的功能,实际使用的时候就发现F11使网页进入全屏 ...
解决win10资源管理器关后电脑黑屏问题
解决步骤: 1.同时按住键盘上Ctrl+Alt+Del三个键,选择任务管理器. 2.点击左上角"文件",点击"运行新任务",在对话框中输入explorer,选择 ...
ios分屏_升级iPadOS（13.1）正式版后如何分屏？iPadOS分屏方法
iPadOS(13.1)正式版已经于9月25日(昨天)凌晨1点开始推送!iPadOS是iOS 13的iPad专属定制版,在iOS 13的基础上加入了专门为iPad定制的功能,以及优化在iPad上的使用 ...
bootstrap 模态框满屏_解决Ueditor在bootstarp 模态框中全屏问题
基本的一些配置就不说了.先说一下要注意的问题:首先是zIndex的设置.记住最好都显示设置模态框和ueditor的zIndex.理清他们的层叠关系. 特别是用到ueditor里面的图片上传功能的更要设 ...
[html] 如何解决微信浏览器视频点击自动全屏的问题？
[html] 如何解决微信浏览器视频点击自动全屏的问题? 1.1 页面内播放 X5内核视频在用户点击后默认会进入全屏播放,前端可以设置video的x5-playsinline属性来将视频限定于网页内部 ...
Flash全屏播放外部多个Flv视频并且按键进行切换+全屏播放外部Flv视频+指定元件播放外部Flv视频(非全屏)(可以作为遮罩来播放)
目录一.目的: 1.Flash全屏播放外部多个Flv视频并且按键进行切换+全屏播放外部Flv视频+指定元件播放外部Flv视频(非全屏),所以将其记录下来二.参考: 1.[AS3编程教学]如何加载并 ...
解决笔记本win7系统玩游戏不能全屏办法
我们在使用笔记本win7系统玩游戏时,经常会发现屏幕居中两边有黑条,而有一些台式机的宽屏显示器也经常出现下玩游戏不能全屏的问题,下面系统之家给大家介绍游戏不能全屏问题通用解决方法. 1.修改注册表中的 ...

js实现全屏与退出全屏，解决F11进入全屏后退出全屏API方法失效（chrome）

js实现全屏与退出全屏，解决F11进入全屏后退出全屏API方法失效（chrome）

js实现全屏与退出全屏，解决F11进入全屏后退出全屏API方法失效（chrome）相关推荐

最新文章

热门文章