Maison > Article > interface Web > Explication détaillée du plein écran JS et quitter le plein écran (y compris le code)

Explication détaillée du plein écran JS et quitter le plein écran (y compris le code)

亚连original: 2018-05-19 14:20:229242parcourir

Nous pouvons voir beaucoup d'effets de sortie plein écran et d'effet plein écran lorsque nous regardons des sites Web vidéo. Ici, nous allons vous présenter les exemples de code d'utilisation de js en plein écran et de sortie du plein écran. Les amis qui en ont besoin peuvent s'y référer <.>

JS plein écran et sortie plein écran

js réalise les fonctions plein écran et sortie plein écran de la fenêtre du navigateur grand public du marché tels que : Google, Firefox. , 360, etc. sont tous compatibles, mais la version inférieure d'IE a un peu de défauts (il y a toujours une barre d'état en bas en mode plein écran).

Cette démo est fondamentalement suffisante. Copiez simplement le code source ci-dessous et enregistrez-le sous forme de fichier HTML pour voir l'effet.

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js全屏和退出全屏代码</title>
<body>
<!-- requestFullScreen(document.documentElement): 整个网页进入全屏
  requestFullScreen(document.getElementById("video-box")): 指定某块区域全屏
 -->
<button onclick="requestFullScreen(document.documentElement)">全屏显示</button>
<button onclick="exitFull()">退出全屏</button>
</body>
<script type="text/javascript">
function requestFullScreen(element) {
 // 判断各种浏览器，找到正确的方法
 var requestMethod = element.requestFullScreen || //W3C
 element.webkitRequestFullScreen || //Chrome等
 element.mozRequestFullScreen || //FireFox
 element.msRequestFullScreen; //IE11
 if (requestMethod) {
  requestMethod.call(element);
 }
 else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript !== null) {
   wscript.SendKeys("{F11}");
  }
 }
}

//Quitter le plein écran pour déterminer le type de navigateur

function exitFull() {
 // 判断各种浏览器，找到正确的方法
 var exitMethod = document.exitFullscreen || //W3C
 document.mozCancelFullScreen || //Chrome等
 document.webkitExitFullscreen || //FireFox
 document.webkitExitFullscreen; //IE11
 if (exitMethod) {
  exitMethod.call(document);
 }
 else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript !== null) {
   wscript.SendKeys("{F11}");
  }
 }
}
</script>
</html>

On sait que pour passer en plein écran dans un navigateur, on appuie généralement sur la touche de raccourci F11. Il n'est pas rare que JS contrôle le plein écran du navigateur. Cela fait ressembler les applications Web davantage à des applications logicielles natives. Par exemple, système de commande, système d'appel, etc.

Il existe de nombreuses façons de rendre le navigateur en plein écran et de quitter le plein écran en utilisant JS. Ce n'est pas le point. Le point important est de noter : le plein écran du navigateur ne peut être déclenché que par des événements de clic de souris.

Méthode plein écran JS

var $fullScreen = document.getElementById("js-fullScreen");//按钮 
if ($fullScreen) { 
  $fullScreen.addEventListener("click", function () { 
    var docElm = document.documentElement; 
    if (docElm.requestFullscreen) { 
      docElm.requestFullscreen(); 
    } 
    else if (docElm.msRequestFullscreen) { 
      docElm.msRequestFullscreen(); 
    } 
    else if (docElm.mozRequestFullScreen) { 
      docElm.mozRequestFullScreen(); 
    } 
    else if (docElm.webkitRequestFullScreen) { 
      docElm.webkitRequestFullScreen(); 
    } 
  }, false); 
}

Méthode de sortie plein écran JS

var $cancelFullScreen = document.getElementById("js-cancelFullScreen"); 
if ($cancelFullScreen) { 
  $cancelFullScreen.addEventListener("click", function () { 
    if (document.exitFullscreen) { 
      document.exitFullscreen(); 
    } 
    else if (document.msExitFullscreen) { 
      document.msExitFullscreen(); 
    } 
    else if (document.mozCancelFullScreen) { 
      document.mozCancelFullScreen(); 
    } 
    else if (document.webkitCancelFullScreen) { 
      document.webkitCancelFullScreen(); 
    } 
  }, false); 
}

Avertissement de la console

Échec de l'exécution de 'requestFullscreen' sur 'Element' : l'API ne peut être lancée que par un geste de l'utilisateur.

Interprétation : on L'exécution de la méthode "requestFullscreen" sur "Element" a échoué. L'API javascript permet uniquement la création par gestes ! (c'est-à-dire aucune autorisation)

Généralement causé par des programmeurs souhaitant déclencher l'affichage automatique en plein écran du navigateur. Mais je suis désolé, cette méthode ne fonctionne pas. Elle doit être créée par des gestes. Même onload, trigger() et mouseover ne peuvent pas être déclenchés !

Explication officielle

La méthode Element.requestFullscreen() émet une requête asynchrone pour que l'élément s'affiche en plein écran. Mais rien ne garantit que l'élément sera mis en mode plein écran.

Si le mode plein écran est autorisé, le document recevra un événement fullscreenchange lui faisant savoir qu'il est désormais en mode plein écran. Si l'autorisation est refusée, le document reçoit un événement FullScreenError.

Conclusion

Peut-être pour le bien de l'expérience utilisateur, le javascript côté client permet au navigateur d'être en plein écran uniquement via des événements de clic de geste de souris, c'est-à-dire de cliquer () .

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles Liés

Voir plus