出现的问题1:用fullscreenchange监听全屏状态的改变时,发现在Chrome浏览器中,无法正确触发该事件,这个问题是由于Chrome浏览器的缺陷引起的。Chrome使用了Webkit引擎,在处理全屏模式时存在一些不一致性。具体来说,Chrome没有正确地实现fullscreenchange事件
解决办法:用resize替换,监听页面的resize事件,根据页面高度是否等于全屏高度判断是否处于全屏状态,具体代码如下:
<template>
<el-button type="primary" @click="screen">{{ fullscreenText }}</el-button>
</template>
const fullscreen = ref(false)
const fullscreenText = ref('全屏')
if (window.innerHeight === window.screen.height) {
//判断初始化后,是否处于全屏状态
fullscreen.value = true
fullscreenText.value = '取消全屏'
}
onMounted(() => {
//监听页面是否全屏,fullscreen为true代表全屏状态,
window.addEventListener('resize', () => {
if (window.innerHeight === window.screen.height) {
//全屏
fullscreen.value = true
fullscreenText.value = '取消全屏'
} else {
fullscreen.value = false
fullscreenText.value = '全屏'
}
})
})
具体点击全屏的代码:
const screen = () => {
let element = document.documentElement;
if (fullscreen.value) {
//退出全屏操作
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
fullscreenText.value = '全屏'
} else {
//全屏操作
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
fullscreenText.value = '取消全屏'
}
//全屏状态取反
fullscreen.value = !fullscreen.value;
}
出现的问题2:通过按钮点击进入的全屏,不能通过键盘F11退出,相反,通过键盘F11进入的全屏,也不能通过按钮点击退出,
解决方法:通过监听keydown事件,取消F11按钮默认事件,用js按钮点击方法代替,代码如下:
//解决按F11实现的全屏,用api不能退出问题,
//之前窗口对象window不能监听到keydowm事件,最好用文档对象document代替
document.addEventListener('keydown', e => {
e = e || window.event
if (e.keyCode === 122) {
//取消f11按钮,用screen方法替代
e.preventDefault()
screen()
}
})