js 判断浏览器全屏

前端使用js让浏览器进入全屏状态,退出全屏状态,以及判断是否为全屏状态

基本原理:使用 Element.requestFullscreen() 方法发出异步请求使元素进入全屏模式
调用此API并不能保证元素一定能够进入全屏模式。
如果元素被允许进入全屏幕模式,返回的Promise会resolve,并且该元素会收到一个fullscreenchange事件,通知它已经进入全屏模式。
如果全屏请求被拒绝,返回的promise会变成rejected并且该元素会收到一个fullscreenerror事件。
如果该元素已经从原来的文档中分离,那么该文档将会收到这些事件。

1. 封装为公共方法

进入全屏:

// 进入全屏
export function fullScreen() {
    let el = document.documentElement;
    let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
    if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
    return;

退出全屏:

//退出全屏
export function exitScreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    if (typeof cfs != "undefined" && cfs) {
        cfs.call(el);

这里增加一个方法,用来判断当前是否为全屏,使用起来更简单些:

// 判断是否为全屏
export function isFullScreen() {
    return  !! (
        document.fullscreen || 
        document.mozFullScreen ||                         
        document.webkitIsFullScreen ||       
        document.webkitFullScreen || 
        document.msFullScreen 
2. 具体使用
import { fullScreen, exitScreen,  isFullScreen } from "../../utils/getMaininfo";
methods: {
    /* 是否为全屏 */
    screenClick() {
      if (!isFullScreen()) {
        fullScreen();
      } else {