HTML DOM fullscreenElement 속성

<시간/>

HTML DOM fullscreenElement 속성은 현재 전체 화면 모드로 표시되는 요소를 반환하는 데 사용됩니다. 주어진 요소가 전체 화면이 아닌 경우 null을 반환합니다.

구문

다음은 fullscreenElement 속성에 대한 구문입니다 -

document.fullscreenElement

fullscreenElement 속성의 예를 살펴보겠습니다 -

참고 − 이 예제에는 Chrome, Safari 및 Opera에 대한 표준 구문 및 브라우저 접두어만 있습니다. 브라우저 접두사는 마지막 섹션을 확인하십시오.

예시

예를 들어 보겠습니다 -

<!DOCTYPE html>
<html>
<head>
<script>
   function FullscreenEle() {
      console.log(document.fullscreenElement || /*Standard Syntax*/
      document.webkitFullscreenElement); /*For Chrome,Safari and Opera*/
   }
   setTimeout(FullscreenEle, 8000);
   function EnableFullScreen() {
      var elem = document.getElementById("image");
      if (elem.requestFullscreen) /*Standard Syntax*/
         elem.requestFullscreen();
      else if (elem.webkitRequestFullscreen) /*For Chrome,Safari and Opera*/
         elem.webkitRequestFullscreen();
      else
         console.log('You cannot go fullscreen currently')
   }
</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>

출력

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

HTML DOM fullscreenElement 속성

"전체 화면으로 이동"을 클릭하면 -

HTML DOM fullscreenElement 속성

위의 예에서 -

먼저 id가 "image"이고 이미지 링크가 src 속성 값인 요소를 만들었습니다. -

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

그런 다음 사용자가 클릭할 때 EnableFullScreen() 메서드를 실행하는 "전체 화면으로 이동" 버튼을 만들었습니다.

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

EnableFullScreen() 메서드는 문서 객체 getElementById() 메서드를 사용하여 img 요소를 가져와 변수 elem에 할당합니다. requestFullScreen 속성을 사용하여 요소를 전체 화면 모드로 열 수 있는지 여부를 확인합니다. img 요소의 requestFullScreen 속성을 사용하지 않습니다.

해당 요소를 전체 화면에서 열 수 있는 경우 requestFullScreen() 메서드를 사용하여 해당 요소를 전체 화면 모드로 가져옵니다. 전체 화면 모드에서 요소를 표시할 수 없는 경우 console.log() 메서드를 사용하여 콘솔에 일부 메시지를 표시합니다.

function EnableFullScreen() {
   var elem = document.getElementById("image");
   if (elem.requestFullscreen) /*Standard Syntax*/
      elem.requestFullscreen();
   else if (elem.webkitRequestFullscreen) /*For Chrome,Safari and Opera*/
      elem.webkitRequestFullscreen();
   else
      console.log('You cannot go fullscreen currently')
}

요소가 전체 화면으로 전환된 후에는 아무 것도 클릭할 수 없으므로 setTimeout(fullscreenEle,8000) 메서드를 사용하여 8000ms(8s) 후에 fullscreenEle() 메서드를 실행하도록 지정합니다. -

setTimeout(FullscreenEle, 8000);

FullscreenEle() 함수는 현재 전체 화면 모드에 있는 요소를 반환하고 console.log() 메서드를 사용하여 콘솔 탭에 요소를 표시합니다. -

function FullscreenEle() {
   console.log(document.fullscreenElement|| /*Standard Syntax*/
   document.webkitFullscreenElement); /*For Chrome,Safari and Opera*/
}

참고 − 의도한 브라우저에서 작동하려면 이 예에 대해 특정 접두사를 사용해야 합니다. 위의 예에서는 Chrome, Opera 및 Safari 브라우저에 대한 표준 구문과 브라우저 접두사만 작성했습니다. 다음은 브라우저에 대한 몇 가지 접두사입니다.

요청의 경우 전체 화면
- 파이어폭스:mozRequestFullScreen
- IE/에지:msRequestFullscreen
fullscreenElement의 경우
- 파이어폭스:mozFullScreenElement
- IE/에지:msRequestFullscreen