JavaScript-Methoden, -Eigenschaften und -Ereignisse zur Steuerung des Browser-Vollbildmodus und verschiedener Browser-Vollbildmodi_Javascript-Fähigkeiten

Vollbild in HTML 5 kann derzeit in anderen Browsern als IE und Opera verwendet werden. Es wird manchmal für Vollbild-APIs, Spiele usw. verwendet. Es ist sehr nützlich. Schauen wir uns zunächst die gängigen APIs an

element.requestFullScreen()

Funktion: Fordern Sie den Vollbildmodus eines bestimmten Elements an

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

Hier ist die Element-ID, um den Vollbildmodus anzufordern

Vollbildmodus verlassen

document.cancelFullScreen()

Document.fullScreen

Gibt true zurück, wenn sich der Benutzer im Vollbildmodus befindet

document.fullScreenElement

Gibt das Element zurück, das sich derzeit im Vollbildmodus befindet

Der folgende Code aktiviert den Vollbildmodus:

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

Mit dem folgenden Code wird der Vollbildmodus für die gesamte Seite aufgerufen

Aber ehrlich gesagt gibt es ein Problem mit VOLLBILD, das leicht zu Täuschungen führen kann, wie zum Beispiel in
http://feross.org/html5-fullscreen-api-attack/, es gibt eine gute DEMO, um zu täuschen, zum Beispiel ein Link sagt http://www.bankofamerica.com, jeder denkt, es sei die Bank of America. Sobald Sie eintreten, wird es die Leute täuschen, weil es die Vollbild-API verwendet

$('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(); 
 }); 

Im Folgenden finden Sie eine Einführung in die Methoden, Eigenschaften und Ereignisse von JavaScript zur Steuerung des Vollbildmodus verschiedener Browser

Die Browser-Vollbildmodus-Startfunktion requestFullscreen muss immer noch vom js-Dialektpräfix jedes Browsers begleitet werden, um den folgenden Code zusammenzustellen:

Der Code lautet wie folgt:

// 判断各种浏览器，找到正确的方法
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")); // 某个页面元素

Rufen Sie die Vollbildmethode für das Seitenelement auf, das Sie im Vollbildmodus anzeigen möchten, aber der Benutzer wird zunächst aufgefordert, den Vollbildmodus zuzulassen. Beachten Sie, dass Benutzer den Vollbildmodus höchstwahrscheinlich ablehnen werden. Wenn der Benutzer im Vollbildmodus arbeitet, werden die Symbolleiste des Browsers und andere Schaltflächenmenüs ausgeblendet und Ihre Seite nimmt den gesamten Bildschirm ein.

Vollbildmodus verlassen

Diese Methode „exitFullscreen“ (die auch das Browser-Präfix erfordert) führt dazu, dass der Browser den Vollbildmodus verlässt und in den normalen Modus wechselt.

Der Code lautet wie folgt:

// 判断浏览器种类
function exitFullscreen() {
 if(document.exitFullscreen) {
  document.exitFullscreen();
 } else if(document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
 } else if(document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
 }
}
// 退出全屏模式!
exitFullscreen();

Es ist zu beachten, dass „exitFullscreen“ nur vom Dokumentobjekt aufgerufen werden kann, nicht vom Objekt, das beim Starten des Vollbildmodus übergeben wurde.

Vollbildeigenschaften und Ereignisse

Leider erfordern die Vollbildeigenschaften und zugehörigen Methoden des Ereignisses auch das Hinzufügen des Browser-Präfixes, aber ich glaube, dass dies nicht bald notwendig sein wird.

1.document.fullScreenElement: Webseitenelement, das im Vollbildmodus angezeigt wird.
2.document.fullScreenEnabled: Bestimmen Sie, ob es sich derzeit im Vollbildmodus befindet.

Das Fullscreenchange-Ereignis wird ausgelöst, wenn der Vollbildmodus gestartet oder der Vollbildmodus beendet wird:

Der Code lautet wie folgt:

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

Sie können weiterhin die oben beschriebene Methode verwenden, um den Browsertyp zu bestimmen, dem dieses Ereignis vorangestellt werden soll.

CSS im Vollbildstil

Verschiedene Browser bieten eine sehr nützliche CSS-Stilregel für den Vollbildmodus:

Der Code lautet wie folgt::

-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 */
}

In manchen Fällen können WebKit-Stile Probleme verursachen, und Sie sollten diese Stile besser einfach halten.

Diese Vollbild-APIs sind super einfach und super nützlich. Ich habe diese API zum ersten Mal in der BananaBread-Demo gesehen. Es war ein Shooter-Spiel, das nur im Vollbildmodus ausgeführt werden musste. Es verwendete Event-Listening, um den Vollbildstatus zu erkennen. Denken Sie an diese nützlichen APIs und Sie können sie bei Bedarf verwenden.