HTML DOM fullscreenElement 속성 완벽 정리 – 현재 전체 화면 요소 확인하기

HTML DOM의 fullscreenElement 속성은 현재 전체 화면(Fullscreen) 모드로 표시되고 있는 요소를 반환하는 데 사용됩니다. 만약 해당 요소가 전체 화면 모드가 아니라면 null을 반환합니다.

문법(Syntax)

fullscreenElement 속성의 기본 문법은 다음과 같습니다.

document.fullscreenElement

그럼 실제 예제를 통해 fullscreenElement 속성이 어떻게 동작하는지 살펴보겠습니다.

참고: 아래 예제는 표준 문법과 Chrome, Safari, Opera 브라우저용 접두사(prefix)만 포함하고 있습니다. 다른 브라우저에서 실행하려면 문서 마지막 부분의 브라우저별 접두사 목록을 참고하세요.

예제(Example)

<!DOCTYPE html>
<html>
<head>
<script>
    function FullscreenEle() {
        console.log(document.fullscreenElement || /*표준 문법*/
        document.webkitFullscreenElement); /*Chrome, Safari, Opera용*/
    }
    setTimeout(FullscreenEle, 8000);
    function EnableFullScreen() {
        var elem = document.getElementById("image");
        if (elem.requestFullscreen) /*표준 문법*/
            elem.requestFullscreen();
        else if (elem.webkitRequestFullscreen) /*Chrome, Safari, Opera용*/
            elem.webkitRequestFullscreen();
        else
            console.log('현재 전체 화면으로 전환할 수 없습니다.')
    }
</script>
</head>
<body>
<h1>Learn Blockchain</h1>
<img id="image" src="https://www.tutorialspoint.com/blockchain/images/blockchain.jpg">
<br>
<button onclick="EnableFullScreen()">Go fullscreen</button>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM fullscreenElement 속성 완벽 정리 – 현재 전체 화면 요소 확인하기

“Go fullscreen” 버튼을 클릭하면 이미지가 전체 화면 모드로 전환됩니다.

HTML DOM fullscreenElement 속성 완벽 정리 – 현재 전체 화면 요소 확인하기

코드 상세 설명

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

1. 이미지 요소 생성

먼저 id가 “image”인 img 요소를 만들고, src 속성에 이미지 링크를 지정했습니다.

<img id="image" data-fr-src="https://www.tutorialspoint.com/blockchain/images/blockchain.jpg">

2. 전체 화면 버튼 생성

사용자가 클릭하면 EnableFullScreen() 메서드를 실행하는 “Go fullscreen” 버튼을 만들었습니다.

<button onclick="EnableFullScreen()">Go fullscreen</button>

3. EnableFullScreen() 함수 동작 원리

EnableFullScreen() 메서드는 document 객체의 getElementById() 메서드를 사용해 img 요소를 가져온 뒤 변수 elem에 할당합니다. 이후 requestFullscreen 속성을 통해 해당 요소가 전체 화면 모드로 열릴 수 있는지 여부를 확인합니다.

요소를 전체 화면으로 표시할 수 있다면 requestFullscreen() 메서드를 호출해 전체 화면 모드로 전환합니다. 반대로 전체 화면 표시가 불가능한 경우에는 console.log() 메서드로 콘솔에 안내 메시지를 출력합니다.

function EnableFullScreen() {
    var elem = document.getElementById("image");
    if (elem.requestFullscreen) /*표준 문법*/
        elem.requestFullscreen();
    else if (elem.webkitRequestFullscreen) /*Chrome, Safari, Opera용*/
        elem.webkitRequestFullscreen();
    else
        console.log('현재 전체 화면으로 전환할 수 없습니다.')
}

4. setTimeout() 활용 이유

요소가 전체 화면 모드로 전환되면 화면상의 어떤 요소도 클릭할 수 없기 때문에, setTimeout(FullscreenEle, 8000) 메서드를 사용해 8000ms(8초) 후에 FullscreenEle() 메서드가 자동으로 실행되도록 설정했습니다.

setTimeout(FullscreenEle, 8000);

5. FullscreenEle() 함수 동작 원리

FullscreenEle() 함수는 현재 전체 화면 모드로 표시 중인 요소를 반환하며, console.log() 메서드를 통해 해당 요소를 콘솔 탭에 출력합니다.

function FullscreenEle() {
    console.log(document.fullscreenElement || /*표준 문법*/
    document.webkitFullscreenElement); /*Chrome, Safari, Opera용*/
}

브라우저별 접두사(Prefix) 정리

참고: 이 예제가 의도한 브라우저에서 정상적으로 작동하려면 각 브라우저에 맞는 접두사를 사용해야 합니다. 위 예제에는 표준 문법과 Chrome, Opera, Safari 브라우저용 접두사만 작성되어 있으며, 그 외 브라우저의 접두사는 아래와 같습니다.

requestFullscreen의 경우
- Firefox: mozRequestFullScreen
- IE/Edge: msRequestFullscreen
fullscreenElement의 경우
- Firefox: mozFullScreenElement
- IE/Edge: msRequestFullscreen