js事件实现全屏和退出全屏
1401 0 0 0
发布时间:2019年12月04日

概述

在做前端PC端项目中,我们经常会遇到让页面全屏的需求。大多情况下,这样可以使得用户在该页面更加专注,屏蔽掉该页面之外的干扰。

状态判断

首先,我们需要给出一个默认状态,即非全屏。然后,在此基础上我们进行DOM操作,每次用户进行操作时,我们先判断当前状态,进行相应的操作,操作过后改变当前状态即可。

事件操作

注:下表中de代表document.documentElement

操作 浏览器 代码
全屏 W3C de.requestFullscreen()
全屏 CHROME de.webkitRequestFullScreen()
全屏 FIREFOX de.mozRequestFullScreen()
全屏 IE de.msRequestFullscreen()
还原 W3C document.exitFullscreen()
还原 CHROME document.webkitCancelFullScreen()
还原 FIREFOX document.mozCancelFullScreen()
还原 IE document.msExitFullscreen()

代码

注: 本demo在vue中使用。如果使用正常.html,自行将@click转为正常点击事件(如onclick)即可。

html

<div @click="handleFullScreen">一个按钮</div>

js

data() {
    return {
        fullscreen: false  // 是否全屏
    }
},
methods: {
    // 全屏事件
    handleFullScreen(){
        let element = document.documentElement;
        // 判断是否已经是全屏
        // 如果是全屏,退出
        if (this.fullscreen) {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
            console.log('已还原!');
        } else {    // 否则,进入全屏
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
                // IE11
                element.msRequestFullscreen();
            }
            console.log('已全屏!');
        }
        // 改变当前全屏状态
        this.fullscreen = !this.fullscreen;
    }
}
评论专区