코드 사본은 다음과 같습니다.
// 다양한 브라우저를 판단하고 올바른 방법을 찾으십시오
함수 launchUllScreen (요소) {
if (element.requestfullscreen) {
요소 .requestfullscreen ();
} else if (element.MozRequestFullScreen) {
요소 .mozRequestFullScreen ();
} else if (element.webKitRequestfullScreen) {
element.webkitrequestfullscreen ();
} else if (element.msrequestfullscreen) {
요소 .mmsrequestfullscreen ();
}
}
// 전체 화면 시작!
LaunchFullScreen (Document.DocumentElement); // 전체 웹 페이지
launchfullscreen (document.getElementById ( "videoElement"));
전체 화면으로 표시하려는 페이지 요소의 전체 화면 메소드를 호출하면 브라우저 창이 전체 화면이되지만 사용자는 먼저 전체 화면 모드를 허용하도록 요청합니다. 사용자가 전체 화면 모드를 거부 할 가능성이 높습니다. 사용자가 전체 화면 모드를 실행하면 브라우저의 도구 모음 및 기타 버튼 메뉴가 숨겨지고 페이지가 전체 화면을 다룹니다.
전체 화면 모드를 종료합니다
이 Exitllscreen 메소드 (브라우저 접두사도 필요)로 인해 브라우저가 전체 화면 모드를 종료하고 일반 모드가됩니다.
코드 사본은 다음과 같습니다.
// 브라우저 유형을 결정합니다
함수 exitfullscreen () {
if (document.exitfullscreen) {
document.exitfullscreen ();
} else if (document.MozCanCelfullScreen) {
document.mozcancelfullscreen ();
} else if (document.WebKiteXitfullScreen) {
document.webkitexitfullscreen ();
}
}
// 전체 화면 모드 종료!
ExitfullScreen ();
전체 화면을 시작할 때 전달 된 객체가 아닌 문서 개체에서만 Exitfullscreen을 호출 할 수 있습니다.
전체 화면 속성 및 이벤트
불행히도, 이벤트의 전체 화면 속성 및 관련 방법에는 브라우저 접두사가 필요하지만 곧 필요하지 않을 것이라고 생각합니다.
1.document.fullscreenElement : 전체 화면 웹 페이지 요소.
2.document.fullscreenEnabled : 현재 전체 화면에 있는지 여부를 결정합니다.
FullScreenchange 이벤트는 전체 화면이 시작되거나 종료되면 트리거됩니다.
코드 사본은 다음과 같습니다.
var fullScreenElement = document.fullscreenElement.
var fullScreenEnabled = document.
위의 메소드를 사용 하여이 이벤트를 여전히 접두사하여 브라우저 유형을 결정할 수 있습니다.
전체 화면 스타일 CSS
다양한 브라우저는 전체 화면 모드에서 매우 유용한 CSS 스타일 규칙을 제공합니다.
다음과 같이 코드를 복사합니다 ::- WebKit-full-screen {
/* 속성 */
}
: -moz-ufull-screen {
/* 속성 */
}
: -ms-fullscreen {
/* 속성 */
}
: 전체 화면 { / *pre-spec * /
/* 속성 */
}
: 전체 화면 { / * 사양 * /
/* 속성 */
}
/ * 더 깊은 요소 */
: -webkit-full-screen video {
너비 : 100%;
높이 : 100%;
}
/* 배경 스타일*/
:: 배경 {
/* 속성 */
}
::-MS-Backdrop {
/* 속성 */
}
경우에 따라 WebKit 스타일에는 몇 가지 문제가 있으며 이러한 스타일을 간단하게 유지하는 것이 좋습니다.
이 풀 스크린 API는 매우 간단하고 매우 유용합니다. MDN의 Bananabread 데모 에서이 API를 처음 보았을 때, 그것은 전체 화면 상태로 풀 스크린 상태를 감지하는 촬영 게임이었습니다. 이 유용한 API를 기억하십시오. 필요할 때 픽업 할 수 있습니다.