다양한 browsers_javascript 기술의 전체 화면 모드를 제어하기 위한 JavaScript 메서드, 속성 및 이벤트 소개

코드 복사 코드는 다음과 같습니다.

// 다양한 브라우저와 find 올바른 방법은
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
요소입니다. mozRequestFullScreen( );
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}

//전체 화면 실행!
launchFullScreen(document.documentElement); //전체 웹페이지
launchFullScreen(document.getElementById("videoElement")) //특정 페이지 요소

전체 화면으로 표시하려는 페이지 요소에 대해 전체 화면 메소드를 호출하면 브라우저 창이 전체 화면으로 표시되지만 사용자에게 먼저 전체 화면 모드를 허용하라는 메시지가 표시됩니다. 사용자는 전체 화면 모드를 거부할 가능성이 높습니다. 사용자가 전체 화면 모드로 실행하면 브라우저의 도구 모음과 기타 버튼 메뉴가 숨겨지고 페이지가 전체 화면을 덮게 됩니다.

전체 화면 모드 종료

이 exitFullscreen 메소드(브라우저 접두어도 필요함)는 브라우저가 전체 화면 모드를 종료하고 일반 모드로 변경하도록 합니다.

코드 복사 코드는 다음과 같습니다.

// 브라우저 유형 결정
기능 exitFullscreen( ) {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (문서 .webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}

//전체 화면 모드를 종료하세요!
exitFullscreen();

exitFullscreen은 전체 화면을 시작할 때 전달된 개체가 아닌 문서 개체에 의해서만 호출될 수 있다는 점에 유의해야 합니다.

전체 화면 속성 및 이벤트

안타깝게도 이벤트의 전체 화면 속성 및 관련 메서드에도 브라우저 접두어를 추가해야 하지만 곧 필요하지 않을 것이라고 생각합니다.

1.document.fullScreenElement: 전체 화면에 표시되는 웹페이지 요소입니다.
2.document.fullScreenEnabled: 현재 전체 화면 상태인지 확인합니다.

전체 화면이 시작되거나 전체 화면이 종료되면 fullscreenchange 이벤트가 트리거됩니다.

코드 복사 코드는 다음과 같습니다.

var fullscreenElement = document.fullscreenElement || .mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

위 방법을 사용하여 이 이벤트 앞에 붙을 브라우저 유형을 결정할 수 있습니다.

전체 화면 스타일 CSS

다양한 브라우저는 전체 화면 모드에 매우 유용한 CSS 스타일 규칙을 제공합니다.

코드 복사 코드는 다음과 같습니다.

:-webkit-full-screen {
/ * 속성 * /
}

:-moz-full-screen {
/* 속성 */
}

:-ms-fullscreen {
/* 속성 */
}

:full-screen { /*사전 사양 */
/* 속성 */
}

:fullscreen { /* 사양 */
/* 속성 */
}

/* 더 깊은 요소 */
:-webkit-full-screen video {
너비: 100%;
높이: 100%;
}

/* 배경 스타일 지정*/
::backdrop {
/* 속성 */
}
::-ms-backdrop {
/* 속성 */
}

어떤 경우에는 WebKit 스타일이 문제를 일으킬 수 있으므로 이러한 스타일을 단순하게 유지하는 것이 좋습니다.

이 전체 화면 API는 매우 간단하고 매우 유용합니다. 저는 MDN의 BananaBread 데모에서 이 API를 처음 보았습니다. 이는 전체 화면 상태를 감지하기 위해 이벤트 수신을 사용하는 슈팅 게임이었습니다. 이러한 유용한 API를 기억하고 필요할 때 사용할 수 있습니다.