HTML DOM의 exitFullscreen() 메서드는 현재 전체 화면(Fullscreen) 모드로 표시 중인 요소를 전체 화면 모드에서 벗어나게 하는 데 사용됩니다. 만약 전체 화면 모드가 아닌 요소에 이 메서드를 실행하면 아무런 동작도 수행하지 않습니다.
구문
exitFullscreen() 메서드의 기본 구문은 다음과 같습니다.
HTMLElementObject.exitFullscreen()
예제
exitFullscreen() 메서드의 실제 사용 예를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<script>
var docEle = document.documentElement;
function GoNormal() {
if (document.exitFullscreen)
document.exitFullscreen();
}
function GoFullscreen() {
if (docEle.requestFullscreen)
docEle.requestFullscreen();
}
</script>
</head>
<body>
<h1>exitFullscreen() 메서드 예제</h1>
<img src="EiffelTower.jpg" width="200px" height="200px">
<p>에펠탑은 1887년 1월 28일에 착공되었습니다.</p>
<button onclick="GoFullscreen();">전체 화면 보기</button>
<button onclick="GoNormal();">일반 화면 보기</button>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
여기서 “전체 화면 보기” 버튼을 클릭하면 −
키보드의 Esc 키를 누르거나 “일반 화면 보기” 버튼을 클릭하면 원래 화면 크기로 되돌아옵니다.
코드 상세 설명
위 예제가 어떻게 동작하는지 단계별로 살펴보겠습니다.
먼저, 사용자가 클릭하면 각각 GoFullscreen() 함수와 GoNormal() 함수를 호출하는 두 개의 버튼 “전체 화면 보기”와 “일반 화면 보기”를 생성했습니다.
<button onclick="GoFullscreen();">전체 화면 보기</button> <button onclick="GoNormal();">일반 화면 보기</button>
GoFullscreen() 함수는 문서의 루트 요소, 즉 HTML 문서에서는 <html> 요소를 가져옵니다. 이후 docEle 객체의 requestFullscreen 속성 값을 확인하여 화면이 이미 전체 화면 모드에 있는지 검사한 뒤, 전체 화면 모드가 아니라면 <html> 요소를 대상으로 requestFullscreen() 메서드를 실행합니다. 참고로 <html> 요소 외에 다른 요소를 지정할 수도 있으며, 그 경우 해당 요소만 전체 화면으로 표시됩니다.
function GoFullscreen() {
if (docEle.requestFullscreen)
docEle.requestFullscreen();
}
GoNormal() 함수는 document 객체의 exitFullscreen 속성 값을 확인하여 화면이 현재 일반 화면 모드인지 검사합니다. 일반 화면 모드가 아니라면 document의 exitFullscreen() 메서드를 실행하여 전체 화면을 해제합니다.
function GoNormal() {
if (document.exitFullscreen)
document.exitFullscreen();
}
참고 사항
Fullscreen API는 Chrome, Edge, Firefox, Safari 등 대부분의 최신 브라우저에서 표준으로 지원됩니다. 다만 구버전 브라우저 호환성이 필요한 경우 webkitExitFullscreen(), mozCancelFullScreen()처럼 공급업체 접두사(vendor prefix)가 붙은 메서드를 함께 처리해 주는 것이 좋습니다. 또한 전체 화면 진입 시에는 반드시 사용자의 클릭·키 입력 등 명시적인 사용자 제스처가 필요하다는 점도 유의해야 합니다.