HTML DOM fullscreenEnabled() 메서드 – 전체 화면 지원 여부 확인하기

HTML DOM의 fullscreenEnabled() 메서드는 현재 문서에서 전체 화면(Fullscreen) 모드를 사용할 수 있는지 여부를 확인하는 데 사용됩니다. 반환 타입은 불리언(Boolean)이며, 읽기 전용(read-only) 속성입니다. 전체 화면 모드가 사용 가능하면 true를, 그렇지 않으면 false를 반환합니다. 브라우저마다 호환성을 위해 서로 다른 접두사(prefix)를 사용해야 한다는 점에 유의하세요.

문법(Syntax)

fullscreenEnabled() 메서드의 기본 문법은 다음과 같습니다.

document.fullscreenEnabled

참고: fullscreenEnabled() 메서드가 정상적으로 동작하려면 브라우저별 접두사를 함께 사용해야 합니다. 각 브라우저에 맞는 접두사는 아래쪽 안내를 참고하세요.

예제(Example)

다음은 fullscreenEnabled() 메서드를 활용한 실제 예제입니다.

<!DOCTYPE html>
<html>
<body>
<h1>fullscreenEnabled() method</h1>
<p>아래 버튼을 클릭하면 이 문서가 전체 화면 모드로 볼 수 있는지 확인할 수 있습니다.</p>
<button onclick="EnableFullScreen();">CHECK</button>
<p id="Sample"></p>
<script>
    function EnableFullScreen() {
        var FullS = (document.fullscreenEnabled || /* 표준 문법 */
        document.webkitFullscreenEnabled) /* Chrome, Safari, Opera */
        if (FullS == true)
            document.getElementById("Sample").innerHTML = "이 문서는 전체 화면 모드로 볼 수 있습니다.";
        else
            document.getElementById("Sample").innerHTML = "이 문서는 전체 화면 모드로 볼 수 없습니다.";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 CHECK 버튼이 화면에 나타납니다. 버튼을 클릭하면 해당 문서의 전체 화면 모드 지원 여부가 결과로 표시됩니다.

코드 설명

위 예제의 동작 방식을 단계별로 살펴보겠습니다.

1. 버튼 생성

먼저 사용자가 클릭하면 EnableFullScreen() 함수를 실행하는 CHECK 버튼을 만듭니다.

<button onclick="EnableFullScreen();">CHECK</button>

2. 전체 화면 지원 여부 확인

EnableFullScreen() 함수는 document.fullscreenEnabled 속성 값을 가져와 변수 FullS에 할당합니다. 이때 반환 값은 true 또는 false 중 하나입니다.

3. 결과 출력

확인된 값에 따라 innerHTML 속성을 사용하여 id가 "Sample"인 단락(<p>)에 결과 메시지를 출력합니다.

function EnableFullScreen() {
    var FullS = (document.fullscreenEnabled || /* 표준 문법 */
    document.webkitFullscreenEnabled) /* Chrome, Safari, Opera */
    if (FullS == true)
        document.getElementById("Sample").innerHTML = "이 문서는 전체 화면 모드로 볼 수 있습니다.";
    else
        document.getElementById("Sample").innerHTML = "이 문서는 전체 화면 모드로 볼 수 없습니다.";
}

브라우저별 접두사 안내

위 예제에서는 표준 문법과 Chrome·Safari·Opera용 접두사(webkit)를 함께 사용했습니다. 다른 브라우저를 사용한다면 아래 접두사를 활용하세요.

Firefox: document.mozFullScreenEnabled
IE/Edge: document.msFullscreenEnabled

이처럼 여러 브라우저의 접두사를 OR(||) 연산자로 묶어 처리하면, 어떤 브라우저에서든 전체 화면 모드 지원 여부를 안정적으로 판별할 수 있습니다.