HTML DOM exitFullscreen() 메서드

<시간/>

HTML DOM exitFullscreen() 메서드는 현재 전체 화면 모드에 있는 요소를 가져오는 데 사용되어 해당 모드를 종료합니다. 전체 화면 모드가 아닌 요소에서 실행하면 아무 작업도 수행하지 않습니다.

구문

다음은 exitFullscreen() 메서드의 구문입니다. -

HTMLElementObject.exitFullscreen()

예시

exitFullscreen() 메서드의 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<head>
<style>
   var docEle = document.documentElement;
   function GoNormal() {
      if (document.exitFullscreen)
      document.exitFullscreen();
   }
   function GoFullscreen() {
      if (docEle.requestFullscreen)
      docEle.requestFullscreen();
   }
</style>
</head>
<body>
<h1>exitFullscreen() method example</h1>
<img src="EiffelTower.jpg" width="200px" height="200px">
<p>The Eiffel Tower was built on 28 January 1887</p>
<button onclick="GoFullscreen();">Fullscreen View</button>
<button onclick="GoNormal();">Normal view</button>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM exitFullscreen() 메서드

전체 화면 보기 클릭 시 -

HTML DOM exitFullscreen() 메서드

키보드에서 Esc 키를 누르거나 "일반 보기" 버튼을 클릭하면 원래 화면 크기로 돌아갑니다. -

위의 예에서 -

사용자가 클릭할 때 GoFullScreen() 또는 GoNormal() 기능을 각각 실행하는 "FullScreen View" 및 "Normal View" 버튼 두 개를 만들었습니다. −

<button onclick="GoFullscreen();">Fullscreen View</button>
<button onclick="GoNormal();">Normal view</button>

GoFullscreen() 함수는 HTML 문서에서 요소인 문서 루트 요소를 가져옵니다. 그런 다음 문서의 부울 requestFullScreen 속성 값을 가져와서 화면이 이미 전체 화면 모드가 아닌지 확인합니다. 전체 화면 보기가 아니면 요소를 사용하여 requestFullScreen() 메서드를 실행합니다. 다른 요소도 사용할 수 있으며 해당 요소에 대해서만 전체 화면을 사용할 수 있습니다. −

function GoFullscreen() {
   if (docEle.requestFullscreen)
   docEle.requestFullscreen();
}

GoNormal() 함수는 화면이 이미 일반 보기에 있지 않은지 확인하기 위해 문서의 exitFullScreen 부울 속성 값을 가져옵니다. 화면이 일반 보기가 아니면 문서의 exitFullScreen() 메서드를 실행합니다. -

function GoNormal() {
   if (document.exitFullscreen)
   document.exitFullscreen();
}