项目中有一个需求：是系统需要全屏，且全屏状态下顶部的内容和非全屏下的内容不一样。开始干活
- 项目使用的是vue，需要全屏插件，上网找了一个screenfull.js，安装上再说
$ npm install --save screenfull
- 安装好后，引入项目，试了一下可以全屏，我用的chrome，IE9以下不要考虑，第一步完成
- 第二布，需要监控全屏状态，但是试了一下，isFullscreen的状态在全屏之后是true，ESC退出全屏之后状态没有改变，于是上网搜了一下。
浏览器故意不上监听ESC键的，跟网页加载完成之后不能用程序使浏览器全屏一样的道理，避免开发者恶意全屏
解决办法：
window.onresize = function(){
if(!checkFull()){
//要执行的动作
}
}
function checkFull(){
var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
//to fix : false || undefined == undefined
if(isFull === undefined) isFull = false;
return isFull;
}
- ok，知道原因后，加到代码中，进行onresize监听事件。
完整代码如下：
<template>
<div v-if='!isFullscreen'> 非全屏状态</div>
<div v-if='isFullscreen'> 全屏状态</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
data () {
return {
isFullscreen: false
}
}，
methods: {
/**
* 全屏事件
*/
screenfull() {
if (!screenfull.enabled) {
this.$message({
message: 'Your browser does not support!',
type: 'warning'
})
return false
}
screenfull.toggle();
this.isFullscreen = true;
},
/**
* 是否全屏并按键ESC键的方法
*/
checkFull() {
var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
// to fix : false || undefined == undefined
if (isFull === undefined) {
isFull = false;
}
return isFull;
}
},
mounted() {
window.onresize = () => {
// 全屏下监控是否按键了ESC
if (!this.checkFull()) {
// 全屏下按键esc后要执行的动作
this.isFullscreen = false;
}
}
}
}
</script>
