전체 화면 API

Fullscreen API를 사용하는 것은 정말 쉽지만 때로는 필요에 따라 작동하지 않거나 모든 브라우저에서 동일하게 작동하지 않는 것을 발견할 수 있습니다. 다양한 시나리오에서 사용하는 방법을 배우려면 계속 읽으십시오.

I exclude IE because nobody should use it in 2022

Chromium 기반, Firefox 및 Safari와 호환되는 예제 코드만 제공합니다.

전체 화면 요청

document.documentElement.requestFullscreen();

The above function is async!

전체화면 종료

document.exitFullscreen();

확인! 좋은 작품은 완벽하지만 이제 시작입니다! Fullscreen API는 모든 브라우저에서 표준화되어 있지 않으므로 호환성을 최대화하려면 접두사를 사용해야 합니다.

호환성

오늘날 대부분의 최신 업데이트 브라우저는 접두사 없이 Fullscreen API를 처리할 수 있지만 100% 호환되는 코드를 작성해 보겠습니다.

const context = document.documentElement;
const requestFullscreen = context.requestFullscreen || context.webkitRequestFullscreen || context.mozRequestFullScreen;
const exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen;

(웹 컴포넌트로 작업하는 경우 context 값을 this로 변경)

엄청난! 이제 토글하려면 requestFullscreen 및 exitFullscreen만 실행하면 됩니다!

아니요! 다음과 같은 오류가 발생합니다.

TypeError: Failed to execute 'requestFullscreen' on 'Element': Illegal invocation

TypeError: Failed to execute 'exitFullscreen' on 'Element': Illegal invocation

컨텍스트(DOM 요소)의 참조가 작동하지 않기 때문에 컨텍스트를 바인딩해야 합니다.

requestFullscreen.bind(document.documentElement)();
exitFullscreen.bind(document)();

웹 컴포넌트 내부에서 사용하려는 경우:

requestFullscreen.bind(this)();
exitFullscreen.bind(document)();

전체 작동 토글 전체 화면

function toggleFullscreen() {
    const requestFullScreen = this.requestFullscreen || this.webkitRequestFullscreen || this.mozRequestFullScreen;
    const exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen;
    const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement;
    if (isFullscreen) return exitFullscreen.bind(document)();
    else if (!isFullscreen) return requestFullScreen.bind(this)();
}
toggleFullscreen.bind(document.documentElement)(); // Typical way
toggleFullscreen.bind(this)(); // Inside web component