Maison >interface Web >js tutoriel >js implémente le code plein écran pour chaque navigateur

js implémente le code plein écran pour chaque navigateur

不言original: 2018-07-03 17:54:511799parcourir

Cet article partage avec vous le code détaillé pour implémenter le plein écran dans divers navigateurs utilisant js. Les amis intéressés peuvent s'y référer pour référence.

Les navigateurs modernes incluent ie11, qui peut être directement implémenté à l'aide de l'API plein écran de h5.
Les versions inférieures d'IE doivent être implémentées via des plug-ins ActiveX

//Télécharger directement ; le code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <button onclick="fullScreen()">现代浏览器全屏</button>

    <button onclick="exitScreen()">现代浏览器退出</button>

    <button onclick="iefull()">低版本ie全屏</button>
  </body>
  <script src="js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    //全屏
    function fullScreen(){
      var el = document.documentElement;
      var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;   
        if(typeof rfs != "undefined" && rfs) {
          rfs.call(el);
        };
       return;
    }
    //退出全屏
    function exitScreen(){
      if (document.exitFullscreen) { 
        document.exitFullscreen(); 
      } 
      else if (document.mozCancelFullScreen) { 
        document.mozCancelFullScreen(); 
      } 
      else if (document.webkitCancelFullScreen) { 
        document.webkitCancelFullScreen(); 
      } 
      else if (document.msExitFullscreen) { 
        document.msExitFullscreen(); 
      } 
      if(typeof cfs != "undefined" && cfs) {
        cfs.call(el);
      }
    }
    //ie低版本的全屏，退出全屏都这个方法
    function iefull(){
      var el = document.documentElement;
      var rfs = el.msRequestFullScreen;
      if(typeof window.ActiveXObject != "undefined") {
        //这的方法 模拟f11键，使浏览器全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if(wscript != null) {
          wscript.SendKeys("{F11}");
        }
      }
    }
    //注：ie调用ActiveX控件，需要在ie浏览器安全设置里面把 ‘未标记为可安全执行脚本的ActiveX控件初始化并执行脚本&#39; 设置为启用
  </script>
</html>

Remarque : Dans l'application réelle, la fonction plein écran applicable à chaque navigateur peut être réalisée en distinguant ie11 ie10 des autres navigateurs et contrôler l'affichage et le masquage des boutons ;

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez prêter attention au. Site Web chinois PHP !

Recommandations associées :

Méthode d'implémentation JS pour afficher la date actuelle

Méthode d'implémentation de l'encapsulation de graphique carrousel 3D VUE

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：JS implémente une méthode pour afficher la date actuelleArticle suivant：JS implémente une méthode pour afficher la date actuelle

Articles Liés

Voir plus