js控制浏览器全屏踩坑记录

需求

点击以下按钮后，页面进入全屏。

进入全屏后，按钮样式改变为

恢复非全屏时，按钮自动恢复。

难点

需求很简单，但是实际上手发现有几个难点：
1.浏览器在全屏状态下按F11和Esc可以退出全屏，且全屏状态按这两个键无法被按键事件捕获，这给判断是否全屏状态带来了困难。
2.document.fullscreenElement可以判断是否全屏，但如果是通过F11的默认事件进入全屏的话，这种判断方式会失效。
3.document.fullscreenElement无法实时监听，这意味着不能单纯的通过绑定这个值给我们的按钮，实现样式的变换。

解决思路

1.进入和退出全屏均会触发resize事件，可以对resize事件进行监听，在resize回调中对document.fullscreenElement取值，从而实现对document.fullscreenElement值的变化的监听，实现是否全屏状态的判断。
2.禁用F11默认事件，按下F11的时候使其执行我们手写的进入退出全屏方法。
3.同1

代码实现

<span class="lg-icon" @click="changeFullScreen()">
	<i class="iconfont" :class="{'icon-huanyuan2':isFullScreen,'icon-quanping1':!isFullScreen}"></i>
</span>

data(){
	return{
		// 是否全屏
        isFullScreen: document.fullscreenElement,
	}
}
created() {
	window.addEventListener('keydown', this.KeyDown, true);// 监听按键事件
	window.addEventListener('resize', this.changeIsFullScreen, false);
},
beforeDestroy() { // 离开时销毁
	window.removeEventListener('keydown', this.KeyDown);
	window.removeEventListener('resize', this.changeIsFullScreen);
},
methods: {
	/**
	* [changeIsFullScreen description]
	*/
	changeIsFullScreen() {
		this.isFullScreen = document.fullscreenElement;
	},
	/**
	* [KeyDown description]
	*/
	KeyDown(event) {
		event = event || window.event;
		if (event.keyCode === 122) {
			// 禁用f11
			event.returnValue = false;
			this.changeFullScreen();
		}
	},
	/**
    * [改变全屏状态]
    * @param   {[Boolean]}  type  [全屏为true，退出全屏为false，不传则自动取反]
    */
	changeFullScreen() {
		if (!document.fullscreenElement) {
                if (document.documentElement.RequestFullScreen) {
                    document.documentElement.RequestFullScreen();
                }
                // 兼容火狐
                if (document.documentElement.mozRequestFullScreen) {
                    document.documentElement.mozRequestFullScreen();
                }
                // 兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
                if (document.documentElement.webkitRequestFullScreen) {
                    document.documentElement.webkitRequestFullScreen();
                }
                // 兼容IE,只能写msRequestFullscreen
                if (document.documentElement.msRequestFullscreen) {
                    document.documentElement.msRequestFullscreen();
                }
            } else {
                if (document.exitFullScreen) {
                    document.exitFullscreen();
                }
                // 兼容火狐
                if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                }
                // 兼容谷歌等
                if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                }
                // 兼容IE
                if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            }
        },
}