방법 - 전체 화면
JavaScript로 전체 화면 창을 만드는 방법을 알아봅니다.
전체 화면 창
JavaScript를 사용하여 전체 화면 모드에서 요소를 보는 방법.
버튼을 클릭하여 전체 화면 모드에서 비디오를 엽니다.
전체 화면 비디오
전체 화면에서 요소를 열려면 다음 element.requestFullscreen()
방법을 사용합니다.
예시
<script>
/* Get the element you want displayed in fullscreen mode (a
video in this example): */
var elem = document.getElementById("myvideo");
/* When the openFullscreen() function is executed, open the video in
fullscreen.
Note that we must include prefixes for different browsers, as
they don't support the requestFullscreen method yet */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else
if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen)
{ /* IE11 */
elem.msRequestFullscreen();
}
}
</script>
전체 화면 문서
전체 페이지를 전체 화면으로 열려면 document.documentElement
대신 를 사용하십시오 . 이 예에서는 닫기 기능을 사용하여 전체 화면을 닫습니다.document.getElementById("element")
예시
<script>
/* Get the documentElement (<html>) to display the page in fullscreen */
var elem = document.documentElement;
/* View in fullscreen */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen)
{ /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen)
{ /* IE11 */
elem.msRequestFullscreen();
}
}
/*
Close fullscreen */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen)
{ /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
</script>
전체 화면 모드일 때 CSS를 사용하여 페이지의 스타일을 지정할 수도 있습니다.
예시
/* Safari */
:-webkit-full-screen {
background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
background-color: yellow;
}
/* Standard syntax */
:fullscreen {
background-color: yellow;
}
관련 페이지
HTML DOM 참조: requestFullscreen() 메서드 .
HTML DOM 참조: exitFullscreen() 메서드 .
HTML DOM 참조: documentElement 속성 .