使用js控制浏览器开启全屏，判断浏览器是否处于全屏状态

原创于 2018-06-14 14:52:25 发布 · 1.9w 阅读

2 ·

CC 4.0 BY-SA版权

js技术专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何使用JavaScript来控制浏览器进入和退出全屏模式，并且提供检测浏览器当前是否处于全屏状态的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 引入lodash
import _ from 'lodash'


// 切换全屏方法
export function fullScreen (isOpen, target) {
    let dom = target || void 0
    let open_list = ['requestFullscreen', 'mozRequestFullScreen', 'webkitRequestFullScreen', 'msRequestFullscreen']
    let cancel_list = ['exitFullscreen', 'mozCancelFullScreen', 'webkitCancelFullScreen']
    let fn = void 0
    if (isOpen) {
        fn = _.find(open_list, (n) => {
            return Boolean(dom[n])
        })
        fn && dom[fn]()
    } else {
        fn = _.find(cancel_list, (n) => {
            return Boolean(document[n])
        })
        fn && document[fn]()
    }
}

// 判断是否是全屏
export function isFullScreen () {
    return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen
}

调用方法

// 触发全屏
fullScreen (e) {
    if (!this.isFullScreen()) {
         this.fullScreen(true, document.body)
    } else {
          this.fullScreen(false)
    }
}