브라우저 전체 화면 및 다양한 브라우저 전체 화면 모드를 제어하기 위한 JavaScript 메소드, 속성 및 이벤트_javascript 기술

HTML 5의 전체 화면은 현재 IE 및 Opera 이외의 브라우저에서도 사용할 수 있으며 때로는 전체 화면 API, 게임 등에 사용됩니다. 매우 유용합니다. 먼저 일반적인 API를 살펴보겠습니다

요소.requestFullScreen()

기능 : 특정 요소의 전체 화면 요청

Document.getElementById(“myCanvas”).requestFullScreen()

전체 화면을 요청하는 요소 ID는 다음과 같습니다

전체 화면 종료

document.cancelFullScreen()

Document.fullScreen

사용자가 전체 화면 모드인 경우 true를 반환합니다

document.fullScreenElement

현재 전체 화면 모드에 있는 요소를 반환합니다.

다음 코드는 전체 화면 모드를 활성화합니다.

function fullScreen(element) { 
  if(element.requestFullScreen) { 
  element.requestFullScreen(); 
 } else if(element.webkitRequestFullScreen ) { 
   element.webkitRequestFullScreen(); 
  } else if(element.mozRequestFullScreen) { 
  element.mozRequestFullScreen(); 
 } 
 } 

다음 코드는 전체 페이지에 대해 전체 화면 모드를 호출하는 코드입니다

그런데 솔직히
처럼 FULL SCREEN 에는 문제가 있어서 쉽게 속일 수 있는 문제가 있습니다. http://feross.org/html5-fullscreen-api-attack/, 속일 수 있는 좋은 데모가 있습니다. 예를 들어 http: //www.bankofamerica.com 다들 Bank of America라고 생각하고 들어가시면 전체 화면 API를 사용하기 때문에 사람들을 속일 것입니다

$('html').on('click keypress', 'a', function(event) { 
  // 不响应真正的A HREF点击事件 
 event.preventDefault(); 
  event.stopPropagation(); 
  // Trigger fullscreen 
  if (elementPrototype.requestFullscreen) { 
   document.documentElement.requestFullscreen(); 
  } else if (elementPrototype.webkitRequestFullScreen) { 
   document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 
  } else if (elementPrototype.mozRequestFullScreen) { 
   document.documentElement.mozRequestFullScreen(); 
  } else { 
   // 
  } 
  //显示假的UI 
  $('#menu, #browser').show(); 
  $('#target-site').show(); 
 }); 

다음은 다양한 브라우저의 전체화면 모드를 제어하기 위한 자바스크립트의 메소드, 속성, 이벤트를 소개합니다

브라우저 전체 화면 모드 시작 기능인 requestFullscreen에는 여전히 각 브라우저의 js 방언 접두사가 수반되어야 합니다. 다음 코드에서는 이를 통합하기 위해 많은 검색 시간을 소비해야 한다고 생각합니다.

코드는 다음과 같습니다.

// 判断各种浏览器，找到正确的方法
function launchFullscreen(element) {
 if(element.requestFullscreen) {
  element.requestFullscreen();
 } else if(element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
 } else if(element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
 } else if(element.msRequestFullscreen) {
  element.msRequestFullscreen();
 }
}
// 启动全屏!
launchFullScreen(document.documentElement); // 整个网页
launchFullScreen(document.getElementById("videoElement")); // 某个页面元素

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

전체 화면 모드 종료

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

코드는 다음과 같습니다.

// 判断浏览器种类
function 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 || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

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

전체 화면 스타일 CSS

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

코드는 다음과 같습니다::

-webkit-full-screen {

 /* properties */
}
:-moz-full-screen {
 /* properties */
}
:-ms-fullscreen {
 /* properties */
}
:full-screen { /*pre-spec */
 /* properties */
}
:fullscreen { /* spec */
 /* properties */
}
/* deeper elements */
:-webkit-full-screen video {
 width: %;
 height: %;
}
/* styling the backdrop*/
::backdrop {
 /* properties */
}
::-ms-backdrop {
 /* properties */
}

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

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