js页面全屏/退出全屏

需求

页面全屏.gif

背景

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

需求分析

1. 状态判断
2. 事件操作

1. 状态判断

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

2. 事件操作

注：下表中de代表document.documentElement

代码

注： 本demo在vue中使用。假如使用正常.html，自行将@click转为正常点击事件(如onclick)就可。

// html<div @click="handleFullScreen">    一个按钮</div>// jsdata() {    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;    }}