【解决全屏ESC和F11问题】vue实现全屏和退出全屏功能,实现让某一个元素全屏功能
全屏功能已经解决了因为点击按钮进入全屏后用户按ESC退出了全屏导致再点击按钮不生效问题,解决了因为按F11全屏后按ESC键不生效无法退出全屏,同时退出全屏的按钮点击也不生效的问题。单个元素全屏代码<template><div><p>这个是点击后单个绑定的元素会全屏</p><el-button type="primary" @click="ful
·
全屏功能
已经解决了因为点击按钮进入全屏后用户按ESC退出了全屏导致再点击按钮不生效问题,解决了因为按F11全屏后按ESC键不生效无法退出全屏,同时退出全屏的按钮点击也不生效的问题。
单个元素全屏代码
<template>
<div>
<p>这个是点击后单个绑定的元素会全屏</p>
<el-button type="primary" @click="fullscreenchange"
>单元素全屏</el-button
>
<div ref="aaaa" class="ceshi">这是单个元素</div>
</div>
</template>
<script>
export default {
methods: {
//单个div全屏方法
fullscreenchange() {
const isFullScreen =
document.fullScreen ||
document.mozFullScreen ||
document.webkitIsFullScreen ||
document.msFullscreenElement;
if (isFullScreen) {
console.log("退出全屏");
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
} else {
var fullscreen = this.$refs.aaaa; // 这个地方绑定需要全屏的元素
console.log("进入全屏");
if (fullscreen.requestFullscreen) {
fullscreen.requestFullscreen();
} else if (fullscreen.mozRequestFullScreen) {
fullscreen.mozRequestFullScreen();
} else if (fullscreen.webkitRequestFullscreen) {
fullscreen.webkitRequestFullscreen();
} else if (fullscreen.msRequestFullscreen) {
fullscreen.msRequestFullscreen();
}
}
},
</script>
<style>
.ceshi {
color: aliceblue;
font-size: 20px;
background-color: red;
width: 200px;
height: 200px;
margin-bottom: 20px;
}
</style>
网页全屏方法
直接复制就行!!
ESC和F11的问题已经解决了,自己复制测试一下就行。
<template>
<div>
<p>这里是点击后整个网页全屏的,并且解决了ESC和F11的监听问题。</p>
<el-button type="primary" @click="enter_full_screen" v-if="!full"
>进入全屏</el-button
>
<el-button type="primary" @click="exitFullscreen" v-else
>退出全屏</el-button
>
</div>
</template>
<script>
export default {
data() {
return {
//true是进入全屏,false是退出全屏
full: false,
};
},
created() {
//指向问题先保存
let that = this;
//这里是监听ESC的
window.onresize = function () {
if (!that.checkFull()) {
// 退出全屏后要执行的动作
console.log("退出全屏");
that.full = false;
}
};
},
mounted() {
//这里是监听F11案件的
window.addEventListener("keydown", this.KeyDown, true); // 监听按键事件
},
methods: {
//进入全屏模式
enter_full_screen() {
this.full = true;
document.documentElement.webkitRequestFullScreen();
},
//退出全屏模式
exitFullscreen() {
this.full = false;
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
},
//监听解决F11打开后无法esc退出同时退出全屏的按钮也失效问题。
KeyDown(event) {
if (event.keyCode === 122) {
event.returnValue = false;
this.enter_full_screen(); //这里方的是触发全屏的方法
}
},
//监听ESC事件,解决点击按钮全屏后按ESC退出再点击按钮不生效问题。
checkFull() {
//判断浏览器是否处于全屏状态 (需要考虑兼容问题)
//火狐浏览器
var isFull =
document.mozFullScreen ||
document.fullScreen ||
//谷歌浏览器及Webkit内核浏览器
document.webkitIsFullScreen ||
document.webkitRequestFullScreen ||
document.mozRequestFullScreen ||
document.msFullscreenEnabled;
if (isFull === undefined) {
isFull = false;
}
return isFull;
},
},
};
</script>
<style>
</style>
更多推荐
已为社区贡献17条内容
所有评论(0)