解决VUE在浏览器全屏下监听不到Esc键盘事件

实测可以在谷歌、火狐、360 浏览器使用

解决了在浏览器全屏下监听不到键盘Esc事件

解决了取消全屏和全屏的同步问题，ESC按键下可以同步

以下是完整的代码，

//
data() {return {isFullscreen: false,}
},
created(){let that = thiswindow.onresize = function(){if(!that.checkFull()){// 退出全屏后要执行的动作console.log("退出全屏")}}
},methods:{checkFull() {//判断浏览器是否处于全屏状态 （需要考虑兼容问题）//火狐浏览器let isFull = document.mozFullScreen ||document.fullScreen ||//谷歌浏览器及Webkit内核浏览器document.webkitIsFullScreen ||document.webkitRequestFullScreen ||document.mozRequestFullScreen ||document.msFullscreenEnabledif (isFull === undefined) {isFull = false}return isFull;},// 全屏&退出全屏toggleFullSceen() {let doc = document.documentElementif (this.isFullScreen) {// 退出全屏if (document.webkitExitFullscreen) {//Chrome等document.webkitExitFullscreen()} else if (document.mozCancelFullScreen) {//FireFoxdocument.mozCancelFullScreen()} else if (document.exitFullscreen) {//W3Cdocument.exitFullscreen()} else if (document.msExitFullscreen) {//IE11document.msExitFullscreen()}} else {if (doc.webkitRequestFullScreen) {// chorme等doc.webkitRequestFullScreen()} else if (doc.mozRequestFullScreen) {// FireFoxdoc.mozRequestFullScreen()} else if (doc.requestFullscreen) {// W3Cdoc.requestFullscreen} else if (doc.msRequestFullscreen) {//IE11doc.msRequestFullscreen()}}this.isFullScreen = !this.isFullScreen},
}

参考资料：https://www.it610.com/article/1296862890581630976.htm

改良后的代码：

mounted() {//初始化全屏状态this.isFullScreen = this.checkFull()// 监听F11按键事件window.addEventListener('keydown', this.keydowns, true)// ESC按键事件无法监听，监听窗口变化事件window.onresize = () => {this.isFullScreen = this.checkFull()}},

method方法：

//判断浏览器是否处于全屏状态 （需要考虑兼容问题）checkFull() {//火狐浏览器let isFull =document.mozFullScreen ||document.fullScreen ||//谷歌浏览器及Webkit内核浏览器document.webkitIsFullScreen ||document.webkitRequestFullScreen ||document.mozRequestFullScreen ||document.msFullscreenEnabledreturn !!isFull},// 全屏&退出全屏toggleFullSceen() {let doc = document.documentElementif (this.isFullScreen) {// 退出全屏if (document.webkitExitFullscreen) {//Chrome等document.webkitExitFullscreen()} else if (document.mozCancelFullScreen) {//FireFoxdocument.mozCancelFullScreen()} else if (document.exitFullscreen) {//W3Cdocument.exitFullscreen()} else if (document.msExitFullscreen) {//IE11document.msExitFullscreen()}} else {if (doc.webkitRequestFullScreen) {// chorme等doc.webkitRequestFullScreen()} else if (doc.mozRequestFullScreen) {// FireFoxdoc.mozRequestFullScreen()} else if (doc.requestFullscreen) {// W3Cdoc.requestFullscreen} else if (doc.msRequestFullscreen) {//IE11doc.msRequestFullscreen()}}this.isFullScreen = !this.isFullScreen},keydowns(event) {// 监听按键f11if (event.keyCode === 122) {event.returnValue = falsethis.toggleFullSceen() //触发全屏的按钮}},

解决VUE在浏览器全屏下监听不到Esc键盘事件相关推荐

esc键退出全屏 vue_解决了VUE在浏览器全屏下监听不到Esc键盘事件
说明: 实测可以在谷歌.火狐.360 浏览器使用解决了在浏览器全屏下监听不到键盘Esc事件解决了取消全屏和全屏的同步问题,ESC按键下可以同步以下是完整的代码, // data() { retu ...
【Vue实用功能】Vue实现浏览器全屏退出全屏
Vue实现浏览器全屏 vue代码 <v-btn class="ml-2" @click="fullScreen" v-show="!is_sma ...
vue中浏览器全屏和退出全屏
1.首先要判断浏览器类型 (是否IE),来控制是否展示功能,在计算属性中判断: computed: {showFullScreenBtn () {return window.navigator.use ...
vue中实现全屏以及对退出全屏的监听
前言: vue中实现默认进来页面,某个div全屏,并监听退出全屏的次数,当退出全屏次数达到5的时候跳转到别的页面. 目录: 实现步骤: 1.页面上在你想要的容器上加上id = 'con_lf_top_ ...
js 进入浏览器全屏（F11效果）、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式（全屏伪类）
各部分功能代码详见注释: <template><div><button v-if="!ifFullScreen" @click="fullS ...
vue实现浏览器全屏以及退出全屏
在src/utils/util.js中加入下面代码块 import Vue from 'vue' const util = Vue.prototype.util = {} // 切换全屏 util.f ...
JS控制全屏，监听退出全屏事件
先放個官方 Web API 接口链接:全屏 API 网上基本都是这种: //全屏功能document.getElementById("ck_buts").onclick = fu ...
js控制网页全屏，监听退出全屏动作
//控制全屏方法 function requestFullScreen(element) {var requestMethod = element.requestFullScreen || //W3C ...
vuejs监听苹果iphone手机键盘事件
在iphone手机中,vue提供的keyup事件是不能监听iphone键盘的,但是h5提供的input事件可以做到. 只需要向下面这样处理,就可以解决iphone不响应键盘事件的bug <tem ...

解决VUE在浏览器全屏下监听不到Esc键盘事件

改良后的代码：

解决VUE在浏览器全屏下监听不到Esc键盘事件相关推荐

最新文章

热门文章