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.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 || 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}')
}
}
}
//以下调用代码根据情况自己改写
//绑定页面全屏按钮的点击事件
handler : function() {
switchFullScreen();
}
//调用方法
switchFullScreen : function() {
if (isFull) {
exitFullScreen();
} else {
enterFullScreen();
}
}