chrome浏览器下完美解决F11全屏和JS的API全屏的按钮状态同步问题

全屏方式

chrome进入全屏有两种实现方式,一个是按F11，另一个是调用JS的API

按钮状态

调用JS的API，一般会在页面上有一个按钮，这个按钮点击进入全屏和退出全屏，那这个按钮有两种状态（进入全屏和退出全屏）

问题

通过按F11进入全屏后，退出全屏时，无法监听退出全屏事件，简单来说就是keydown和fullscreenChange这两个事件不触发，所以按钮的状态不能同步更新（通过JS的API是可以监听到fullscreenChange事件）

解决方式

阻止F11的默认行为，改为调用JS的API，这样就能通过fullscreenChange事件判断是否是全屏态，同步更新按钮状态

window.addEventListener('keydown', event => {
    if (event.code === 'F11') {
        event.preventDefault() // 阻止F11默认全屏事件
        document.documentElement.requestFullscreen() // 调用JS的API进入全屏
    }
})
window.addEventListener('fullscreenChange', () => {
    if (document.fullscreenElement) {
        console.log('进入全屏')
    }
    else {
        console.log('退出全屏')
    }
})

// JS的API进入全屏和退出全屏方法
 document.documentElement.requestFullscreen()
 document.exitFullscreen

说明

以上方案只针对Chrome浏览器，其他浏览器可能需要对应的内核API前缀或对应的API，如需兼容，请自行完善代码