Js 网页全屏(vue)

效果描述

以下逻辑均正常

点击按钮全屏、点击按钮退出全屏、再点击按钮全屏

点击按钮全屏，F11 / ESC 退出全屏，点击按钮全屏

F11 进入全屏，点击按钮退出全屏

不同页面操作全屏，切换全屏均能精准的控制按钮显示的是全屏 / 缩放

申明

本 demo 默认状态是全屏(刷新网页也会退出全屏，切换页面不会)

只考虑网页全屏，不考虑网页单个元素全屏

项目中有弹窗全屏等，可能会有兼容bug，暂时没有去试验，不知道如何

代码里结合了 vuex，安装使用请参考：VueX(Vue状态管理模式)

浏览器兼容效果：

(仅用公司电脑上有的几个浏览器测试了一遍)

谷歌浏览器、IE11、Edge火狐、360安全浏览器 均能正常支持本博客的全屏方法以及全屏css

本博客起因

还是想叨叨一下为什么百度这么方便还是会有这么一篇博客，毕竟是恶心过来的

(这个方案是我写了好几个版本才得出的)

最主要的还是自己看着 bug不爽

一：全屏API各浏览器支持不同(主要讲的是里面的方法，谷歌浏览器里部分兼容...)

我要判断全屏木的办法，一会儿灵一会儿不灵的

二：无法监听 ESC、F11 退出全屏的事件(即使我已经监听了这两个案件事件，在退出全屏的时候，它们依旧不能被监听到)

我自己记录的全屏状态被这两个案件搞混乱了

解决方案

参考博客中有提到：

注意：要在用户授权全屏后才能获取全屏的元素(但我的浏览器好像没有授权这么个操作，所以不管它)

解决思路

主要在 vuex 中处理全屏状态变量 fullscreen 与真正操作浏览器全屏退出全屏

vuex 中的变量很多地方都可以获取到

定义一个全屏处理方法，根据当前网页是否有全屏元素来进入或者退出全屏

在 app.vue 全局里监听 F11 与全屏改变事件

等于把 F11 的进入全屏改成了自己的进入全屏

ESC退出全屏监听不到，也就不监听它的按键了

通过全屏事件监听来改变全屏状态变量 fullscreen 的值(在 ESC、F11 退出全屏的时候也会触发)

在 xx.vue 中给按钮增加全屏、缩放(退出全屏)功能

调用 vuex 中的处理全屏方法

(也可以写一个 lib 通用函数，将变量与函数都封装进入，然后在合适的地方调用，全屏事件监听放在什么位置暂时没有想清楚(主要是不同页面切换该如何管理这个监听事件))

代码实现

src\store\index.js(vuex)

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({

state: {

// 全屏变量，标识当前是否为全屏状态

fullscreen: false,

element: document.documentElement

},

mutations: {

// 改变全屏状态变量

changeFullscreenVar(state) {

state.fullscreen = !state.fullscreen

},

// 进入全屏

lanchFullscreen(state) {

var element = state.element

if(element.requestFullscreen) {

element.requestFullscreen()

} else if(element.mozRequestFullScreen) {

element.mozRequestFullScreen()

} else if(element.msRequestFullscreen) {

element.msRequestFullscreen()

} else if(element.webkitRequestFullscreen) {

element.webkitRequestFullScreen()

}

},

// 退出全屏

exitFullscreen(state) {

if(document.exitFullscreen) {

document.exitFullscreen()

} else if(document.mozCancelFullScreen) {

document.mozCancelFullScreen()

} else if(document.msExitFullscreen) {

document.msExiFullscreen()

} else if(document.webkitCancelFullScreen) {

document.webkitCancelFullScreen()

}

},

// 暴露给外界的处理方法，调用这个方法，自行判断是要全屏还是退出全屏

handleFullScreen(state) {

// 注意：要在用户授权全屏后才能获取全屏的元素，否则 fullscreenEle为null

var fullscreenEle = fullscreenEle = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;

console.log(fullscreenEle, '全屏元素...')

if(fullscreenEle) {

console.log('exitFullscreen..')

this.commit('exitFullscreen')

} else {

console.log('lanchFullscreen..')

this.commit('lanchFullscreen')

}

}

},

actions: {

},

modules: {

}

})

src\App.vue

export default {

name: 'App',

components: {

},

mounted() {

window.addEventListener('keydown', this.myKeyEvent)

if(document.exitFullscreen) {

document.addEventListener('fullscreenchange', this.changeFullscreenVar)

} else if(document.mozCancelFullScreen) {

document.addEventListener('mozfullscreenchange', this.changeFullscreenVar)

} else if(document.msExitFullscreen) {

document.addEventListener('MSFullscreenChange', this.changeFullscreenVar)

} else if(document.webkitCancelFullScreen) {

document.addEventListener('webkitfullscreenchange', this.changeFullscreenVar)

}

},

methods: {

myKeyEvent(e) {

let key = e.keyCode

if (key === 122) {

console.log('F11')

// 阻止默认的键盘事件

event.returnValue = false

this.$store.commit('handleFullScreen')

}

},

changeFullscreenVar(){

this.$store.commit('changeFullscreenVar')

},

fullScreenChange(event) {

console.log(event, 'fullScreenChange event')

// 判断一下变量是不是全屏，是全屏则代表 F11、ESC 退出了全屏，需要变量更正过来

if(this.$store.state.btnFullScreen && this.$store.state.fullscreen) {

this.$store.commit('changeFullScreenVariable')

}

},

},

beforeDestroy() {

window.removeEventListener('keydown', this.myKeyEvent)

if(document.exitFullscreen) {

document.removeEventListener('fullscreenchange', this.changeFullscreenVar)

} else if(document.mozCancelFullScreen) {

document.removeEventListener('mozfullscreenchange', this.changeFullscreenVar)

} else if(document.msExitFullscreen) {

document.removeEventListener('MSFullscreenChange', this.changeFullscreenVar)

} else if(document.webkitCancelFullScreen) {

document.removeEventListener('webkitfullscreenchange', this.changeFullscreenVar)

}

}

}

src\views\xx.vue

export default {

methods: {

clickTopBtn(func) {

this.$store.commit('handleFullScreen')

}

}

}

/*重在功能逻辑代码，样式自己写*/

全屏css样式

/* 多浏览器兼容性写法(亲测有效) */

/* Chrome, Safari, Opera 写法 */

:-webkit-full-screen { }

/* Firefox 写法 */

:-moz-full-screen { }

/* IE/Edge 写法 */

:-ms-fullscreen { }

/* 标准写法 */

:fullscreen { }

/* 也可以通过区分全屏元素 css选择器、浏览器全屏样式 */

#fullscreenEle:fullscreen { }

在全屏状态需要改变样式的地方根据自己的项目写就好了

/* :fullscreen */

:fullscreen #centerInfo,

:fullscreen #rightContent{

display: none;

}

:fullscreen .menuItem:not(:nth-last-child(1)) {

margin-right: 20px;

}

:fullscreen #navMenu{

width: unset;

border-radius: 8px;

left: 10px;

top: 10px;

}

/* :-webkit-full-screen */

:-webkit-full-screen #centerInfo,

:-webkit-full-screen #rightContent{

display: none;

}

:-webkit-full-screen .menuItem:not(:nth-last-child(1)) {

margin-right: 20px;

}

:-webkit-full-screen #navMenu{

width: unset;

border-radius: 8px;

left: 10px;

top: 10px;

}

/* :-moz-full-screen */

:-moz-full-screen #centerInfo,

:-moz-full-screen #rightContent{

display: none;

}

:-moz-full-screen .menuItem:not(:nth-last-child(1)) {

margin-right: 20px;

}

:-moz-full-screen #navMenu{

width: unset;

border-radius: 8px;

left: 10px;

top: 10px;

}

/* :-ms-fullscreen */

:-ms-fullscreen #centerInfo,

:-ms-fullscreen #rightContent{

display: none;

}

:-ms-fullscreen .menuItem:not(:nth-last-child(1)) {

margin-right: 20px;

}

:-ms-fullscreen #navMenu{

/* IE 不能用 unset，案例中改成 auto 也行 */

width: auto;

border-radius: 8px;

left: 10px;

top: 10px;

}

特别鸣谢

非常感谢~