摘要:通常在某些情况下,我们需要让浏览器开启全屏模式,以便获得更好的视觉体验,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入。
通常在某些情况下,我们需要让浏览器开启全屏模式,以便获得更好的视觉体验,先看下全屏模式简单的几个API。
浏览器默认绑定
非全屏模式下, document的F11按键绑定开启全屏模式
全屏模式下, document的esc和F11 按键绑定关闭全屏模式
屏幕全屏模式改变事件
当成功进入全屏模式后, document会收到一个fullscreenchange 事件。 当退出全屏状态后, document又会收到fullscreenchange 事件。
var screenChange = 'webkitfullscreenchange' || 'mozfullscreenchange' || 'fullscreenchange'
判断当前是否处于全屏状态
非标准:
var isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
标准:
var isFullScreen = document.fullscreenElement || document.mozFullScreenElement ||document.webkitFullscreenElement开启全屏模式
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();
}
}
注意: requestFullscreen是规范的书写模式( s是小写), 但在Gecko内核中仍使用带前缀的大写模式mozRequestFullScreen。
关闭全屏模式
function exitFullscreen() {if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
全屏模式只能由手势触发
了解API后,假如我们监听window.onload事件执行launchFullScreen方法,Chrome浏览器会提示“开启全屏模式API只能由用户手势触发”。
"Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture."原因是浏览器采用安全的机制, 将这种强制全屏模式意为“恶意行为”, 一切非用户主观意愿带来的变化都是不允许的。
因此如果你的应用有全屏需求,有两种方案。
1.页面初始化给用户一个“F11开启全屏” 的提示, 并且在延迟几秒之后消失。
2.页面设置一个全屏按钮,单击全屏按钮进入全屏模式,并且隐藏按钮(视觉效果最佳)。
对于第二种方案,需要监听键盘事件:
document.addEventListener("keydown", function(e) {var currKey = 0
//在FireFox或Opera中,隐藏的变量e是存在的,那么e||event返回e,如果在IE中,隐藏变量e是不存在,则返回event。
var e = e || event;
//IE中,只有keyCode属性,而FireFox中有which和charCode属性,Opera中有keyCode和which属性
var currKey = e.keyCode || e.which || e.charCode;
if (currKey == 112) {
launchFullScreen();
}
}, false);
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号