h5前端如何实现F11全屏功能_在uni-app中打开h5页面有按f11的效果-优快云博客

本文链接：https://blog.youkuaiyun.com/mingjing941018/article/details/128305664

网站全部实现小demo：兼容谷歌和Edge


@{
  Layout = null;
}

<!DOCTYPE html>

<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>Index</title>
  <script src="~/Content/jquery/jquery-3.4.1.min.js"></script>
</head>
<body>
  <div style="margin:0 auto;height:600px;width:700px;">
    <button id="btn">js控制页面的全屏展示和退出全屏显示</button>
    <div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;">
      <h1>js控制页面的全屏展示和退出全屏显示</h1>
    </div>
  </div>
  <script language="JavaScript">
    let IsFullScreen = false;

    document.getElementById("btn").onclick = function () {
      var elem = document.getElementById("content");
      requestFullScreen(elem);
    };

    document.getElementById("content").onclick = function () {
      var elem = document.getElementById("content");
      if (IsFullScreen) {
        exitFullScreen(elem);
        IsFullScreen = false;
      } else {
        requestFullScreen(elem);
        IsFullScreen = true;
      }
      
    };
    //全屏事件
    function requestFullScreen(element) {
      var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
      if (requestMethod) {
        requestMethod.call(element);
      } else if (typeof window.ActiveXObject !== "undefined") {
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
          wscript.SendKeys("{F11}");
        }
      }
    }

    //退出全屏事件
    function exitFullScreen(el) {
      var el = document
      var cfs = el.cancelFullScreen || el.mozCancelFullScreen || el.msExitFullscreen || el.webkitExitFullscreen ||
        el.exitFullscreen,
        wscript
      if (cfs) {
        cfs.call(el);
        return;
      } else if (typeof window.ActiveXObject !== "undefined") {
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
          wscript.SendKeys("{F11}");
        }
      } else {
        alert('浏览器不支持全屏API或已被禁用')
      }
    }

//20230131补
//开启全屏
    function StartFullScreen() {
      var el = document.documentElement;
      //element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
      var rfs = el.requestFullScreen || el.webkitRequestFullScreen;
      if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
      } else if (typeof window.ActiveXObject != "undefined") {
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
          wscript.SendKeys("{F11}");
        }
      } else if (el.msRequestFullscreen) {
        el.msRequestFullscreen();
      } else if (el.oRequestFullscreen) {
        el.oRequestFullscreen();
      } else if (el.mozRequestFullScreen) {
        el.mozRequestFullScreen();
      } else {
        alert('浏览器不支持全屏调用！');
      }
    }

    //退出全屏
    function ExitFullScreen() {
      var el = document;
      //el.cancelFullScreen || el.mozCancelFullScreen || el.msExitFullscreen || el.webkitExitFullscreen || el.exitFullscreen
      var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.exitFullScreen;
      if (typeof cfs != "undefined" && cfs) {
        cfs.call(el);
      } else if (typeof window.ActiveXObject != "undefined") {
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
          wscript.SendKeys("{F11}");
        }
      } else if (el.msExitFullscreen) {
        el.msExitFullscreen();
      } else if (el.oRequestFullscreen) {
        el.oCancelFullScreen();
      } else if (el.mozCancelFullScreen) {
        el.mozCancelFullScreen();
      } else {
        alert('浏览器不支持全屏调用！');
      }
    }

  </script>
</body>
</html>