一个有点反直觉的报错 ｜ TypeError: Failed to execute 'requestFullscreen' on 'Element': Illegal invocation

今天在调用请求浏览器全屏的方法等时候遇到了这个问题，直接看报错的意思是非法的调用，看一下报错的代码

const canvas = document.querySelector('canvas.webgl')

window.addEventListener('dblclick', () => {
    const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement;
    if (fullscreenElement) {
        (document.exitFullscreen || document.webkitExitFullscreen)();
    } else {
        (canvas.requestFullscreen || canvas.webkitRequestFullscreen)();
    }
})

这里为了兼容webkit，所以在调用exitFullscreen和requestFullscreen的时候用了或操作符。

出现这个问题是因为方法的上下文（即 this）不正确。requestFullscreen 是一个 DOM 元素的方法，它必须在一个 DOM 元素上被调用，而不是直接在函数或其他对象上。

上面这一串代码执行的上下文相当于变成了window，因为回调函数是箭头函数。了解到是this的问题以后就可以着手解决了。

解法1

使用call手动绑定上下文

window.addEventListener('dblclick', () => {
    const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement;
    if (fullscreenElement) {
        (document.exitFullscreen || document.webkitExitFullscreen).call(document);
    } else {
        (canvas.requestFullscreen || canvas.webkitRequestFullscreen).call(canvas);
    }
})

解法2

通过if、else手动进行判断和调用

const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement;

if (fullscreenElement) {
    // 退出全屏
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
} else {
    // 进入全屏
    if (canvas.requestFullscreen) {
        canvas.requestFullscreen();
    } else if (canvas.webkitRequestFullscreen) {
        canvas.webkitRequestFullscreen();
    }
}