Méthodes, propriétés et événements JavaScript pour contrôler le plein écran du navigateur et diverses compétences modes_javascript du navigateur

Le plein écran en HTML 5 peut actuellement être utilisé dans des navigateurs autres que IE et Opera. Il est parfois utilisé pour les API plein écran, les jeux, etc. C'est très utile. Examinons d'abord les API courantes

element.requestFullScreen()

Fonction : Demander le plein écran d'un certain élément

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

Voici l'ID de l'élément à demander en plein écran

Quitter le plein écran

document.cancelFullScreen()

Document.fullScreen

Renvoie vrai si l'utilisateur est en mode plein écran

document.fullScreenElement

Renvoie l'élément actuellement en mode plein écran

Le code suivant active le mode plein écran :

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

Le code suivant permet d'appeler le mode plein écran pour toute la page

Mais pour être honnête, il y a un problème avec le PLEIN ÉCRAN, qui peut facilement conduire à une tromperie, comme dans
http://feross.org/html5-fullscreen-api-attack/, il existe une bonne DEMO pour tromper, par exemple, un lien dit http: //www.bankofamerica.com, tout le monde pense qu'il s'agit de Bank of America. Une fois entré, cela trompera les gens car il utilise l'API plein écran
.

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

Ce qui suit est une introduction aux méthodes, propriétés et événements de JavaScript pour contrôler le mode plein écran de divers navigateurs

La fonction de démarrage du mode plein écran du navigateur requestFullscreen doit toujours être accompagnée du préfixe du dialecte js de chaque navigateur. Je pense que le code suivant vous demandera de passer beaucoup de recherches pour le rassembler :

Le code est le suivant :

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

Appelez la méthode plein écran sur l'élément de page que vous souhaitez afficher en plein écran. La fenêtre du navigateur deviendra plein écran, mais il sera d'abord demandé à l'utilisateur d'autoriser le mode plein écran. Sachez que les utilisateurs rejetteront très probablement le mode plein écran. Si l'utilisateur exécute en mode plein écran, la barre d'outils du navigateur et les autres menus de boutons seront masqués et votre page couvrira tout l'écran.

Quitter le mode plein écran

Cette méthode exitFullscreen (qui nécessite également le préfixe du navigateur) fera sortir le navigateur du mode plein écran et passera en mode normal.

Le code est le suivant :

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

Il convient de noter que exitFullscreen ne peut être appelé que par l'objet document, et non par l'objet transmis lors du démarrage du mode plein écran.

Propriétés et événements en plein écran

Malheureusement, les propriétés plein écran et les méthodes associées de l'événement nécessitent également l'ajout du préfixe du navigateur, mais je pense que cela ne sera pas nécessaire de sitôt.

1.document.fullScreenElement : Élément de page Web affiché en plein écran.
2.document.fullScreenEnabled : déterminez s'il est actuellement en plein écran.

L'événement fullscreenchange est déclenché lorsque le plein écran est démarré ou lorsque le plein écran est quitté :

Le code est le suivant :

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

Vous pouvez toujours utiliser la méthode ci-dessus pour déterminer le type de navigateur pour préfixer cet événement.

Style CSS plein écran

Divers navigateurs fournissent une règle de style CSS très utile pour le mode plein écran :

Le code est le suivant ::

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

Dans certains cas, les styles WebKit peuvent causer des problèmes, et vous feriez mieux de garder ces styles simples.

Ces API plein écran sont super simples et super utiles. J'ai vu cette API pour la première fois dans la démo BananaBread de MDN. C'était un jeu de tir qui devait juste être en plein écran. Il utilisait l'écoute d'événements pour détecter l'état plein écran. N'oubliez pas ces API utiles et vous pourrez les utiliser en cas de besoin.