[JS] Fullscreen API

:) fullscreen mode

특정 요소를 Fullscreen mode 로 표시하고 종료할 경우 사용 되는 메소드를 알아보겠습니다.

Methods

requestFullscreen

Element.requestFullscreen()

지정한 요소를 Fullscreen mode 로 설정하고 브라우져의 모든 UI요소와 다른 모든 애플리케이션을 화면에서 제거하도록 요구합니다.

exitFullscreen

Element.exitFullscreen()

사용자가 Fullscreen mode 에서 창 모드로 다시 전환하도록 요청 할때 사용되는 메소드입니다.

---

Properties

document 인터페이스는 Full screen mode 가 지원되고 사용가능 한지,
현재 활성화 되어 있는지, 어떤 요소가 스크린을 사용하고 있는지 확인하는 속성을 제공합니다.

fullscreenElement

document.fullscreenElement

DOM에서 현재 Fullscreen mode로 표시되는 요소(Element)를 알려줍니다.
null 인 경우에 Fullscreen mode가 아닌 상태입니다.
배포시에 브라우져 환경에 맞게 mozFullscreenElement, msFullscreenElement, webkitFullscreenElement 확인해야 합니다.

fullscreenEnabled

document.fullscreenEnabled

이 속성은 Full screen mode 를 사용할 수 있는지 여부를 알려줍니다.
Full screen mode 를 사용할 수 없으면 false 를 반환합니다.

Event Handler

Full screen mode 켜고 끌 때나 변경하는 과정에서 오류가 발생하는 것을 감지하는데 사용할 수 있는 두 가지 이벤트를 알아보겠습니다.

onfullscreenchange

document.onfullscreenchange = function(){
 	console.log('Full screen mode가 변경될 때마다 출력됩니다.') 
}

onfullscreenerror

document.onfullscreenerror = function(){
 	 console.log('Full screen mode로 전환하거나 외부에서 전환을 시도하는 동안 오류가 발생하면 출력됩니다.'
}