浏览器全屏fullScreen

浏览器全屏fullScreen

全屏操作

// 全屏
fullScreen () {
    this.fullScreenVisible = true
    const element = document.getElementById('view-log');// 指定全屏区域元素
    element.requestFullscreen()
    // fullscreenchange 事件当浏览器进入或离开全屏时触发
    document.addEventListener("fullscreenchange", (e) => {
            if (document.fullscreenElement == null) {
                this.closeFullScreen()
            }
        })
},

退出全屏

// 退出全屏
closeFullScreen () {
    this.fullScreenVisible = false
    if (document.fullscreenElement !== null) {
        document.exitFullscreen();
    }
}

退出全屏报错

报错如下：

Uncaught (in promise) TypeError: Failed to execute ‘exitFullscreen’ on ‘Document’: Document not active

报错原因：在未全屏的情况下触发exitFullscreen

解决方案：

// 在退出全屏前判断 document.fullscreenElement !== null
if (document.fullscreenElement !== null) {
    document.exitFullscreen();
}