Fullscreen API requestFullscreen() 메서드

정의와 사용법

requestFullscreen() 요소를 전체 화면 모드로 열는 메서드.

힌트:사용해야 합니다 exitFullscreen() 메서드전체 화면 모드를 취소합니다。

예제

예제 1

전체 화면 모드로 <video> 요소를 표시합니다：

/* 전체 화면 모드로 표시할 요소(이 예제에서는 비디오)를 가져옵니다：*/
var elem = document.getElementById("myvideo");
/* openFullscreen() 함수를 실행할 때, 전체 화면으로 비디오를 열어줍니다.
다양한 브라우저의 프리픽스를 포함해야 합니다. 왜냐하면 그들은 requestFullscreen 속성을 지원하지 않기 때문입니다 */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* 사파리 */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

본인이 직접 시도해 보세요

예제 2

HTML 페이지를 전체 화면으로 열려면 document.documentElement을 사용해야 합니다. document.getElementById("element") 대신에요. 이 예제에서는 전체 화면을 닫는 함수도 사용했습니다：

/* documentElement (<html>)를 전체 화면으로 보여주기 위해 가져오기 */
var elem = document.documentElement;
/* 전체 화면으로 보기 */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* 사파리 */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* 전체 화면을 닫기 */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* 사파리 */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

본인이 직접 시도해 보세요

예제 3

페이지가 전체 화면 모드에 있을 때, CSS를 사용하여 페이지 스타일을 설정할 수도 있습니다:

/* 사파리 */
:-webkit-full-screen {
  background-color: yellow;
}
/* IE11 문법 */
:-ms-fullscreen {
  background-color: yellow;
}
/* 표준 문법 */
:fullscreen {
  background-color: yellow;
}

본인이 직접 시도해 보세요

문법

HTMLElementObject.requestFullscreen()

파라미터

없음.

기술 세부 사항

반환 값: 반환 값이 없습니다.

브라우저 지원

표에 나타난 숫자는 이 메서드를 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

주석:일부 브라우저는 특정 프리퍼كس가 필요합니다(구체적인 내용은 괄호 참조):

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
71.0
15.0 (webkit)		 79.0
11.0 (ms)		 64.0
9.0 (moz)		 6.0 (webkit) 58.0
15.0 (webkit)