最新通知
js 使浏览器进入全屏
阅读次数:99 最后编辑时间:2024年01月17日

概述

点击按钮实现浏览器沾满电脑屏幕,隐藏地址栏标签栏,再次点击取消全屏化,显示地址栏标签栏

changeFullScreen() {
    const element = document.documentElement
    // 如果是全屏状态
    if (this.fullscreen) {
        // 如果浏览器有这个Function
        if (document.exitFullscreen) {
            document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen()
        }
    } else {
        // 如果浏览器有这个Function
        if (element.requestFullscreen) {
            element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen()
        }
    }
    // 判断全屏状态的变量
    this.fullscreen = !this.fullscreen
}