vue、js实现页面全屏-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue、js实现页面全屏。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

浏览器可能是处于安全的考虑，无法实现进入页面自动全屏，只能通过用户操作的形式触发全屏！！！

ps：可以通过登录按钮触发登录成功自动全屏

实测vue中可通过登录点击事件加载组件自动全屏

import { useFullscreen } from '@vueuse/core'

const { isFullscreen, enter, exit, toggle } = useFullscreen();

toggle();

同理这个应该也可以实现（没有测试）文章来源地址https://www.toymoban.com/news/detail-709711.html

import screenfull from 'screenfull'
// 切换全屏
screenfull.toggle()

第一种形式：点击按钮实现全屏和退出全屏

<!DOCTYPE html>
<html>
  <head>
    <script>
      window.onload = openfullscreen();

      function launchIntoFullscreen(element) {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      }

      function openfullscreen() {
        launchIntoFullscreen(document.documentElement);
      }

      function exitFullscreen() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
        window.close();
      }

      function fix() {
        var screenwidth = screen.width;
        var screenhei = screen.height;
        document.getElementById("ifam").width = screenwidth;
        document.getElementById("ifam").height = screenhei;
      }
    </script>
    <style>
      #ifam {
        position: fixed;
        left: 0%;
        top: 0%;
        z-index: -1;
      }
      #fullscreen {
        position: fixed;
        left: 0%;
        top: 0%;
        z-index: 1;
      }
    </style>
  </head>
  <body onload="fix()">
    <div id="fullscreen">
      <button onclick="openfullscreen()">Open</button>
      <button onclick="exitFullscreen()">Exit</button>
    </div>
    <iframe id="ifam" src="https://docs.python.org"></iframe>
  </body>
</html>

第二种形式：点击页面任何位置实现全屏

<html>
  <head>
    <script language="jscript">
      function goFullscreen() {
        // Must be called as a result of user interaction to work
        mf = document.getElementById("main_frame");
        mf.webkitRequestFullscreen();
        mf.style.display = "";
      }
      function fullscreenChanged() {
        if (document.webkitFullscreenElement == null) {
          mf = document.getElementById("main_frame");
          mf.style.display = "none";
        }
      }
      document.onwebkitfullscreenchange = fullscreenChanged;
      document.documentElement.onclick = goFullscreen;
      document.onkeydown = goFullscreen;
    </script>
  </head>
  <body style="margin: 0">
    <h1>
      Click anywhere or press any key to browse <u>Python documentation</u> in
      fullscreen.
    </h1>
    <iframe
      id="main_frame"
      src="https://docs.python.org"
      style="width: 100%; height: 100%; border: none; display: none"
    ></iframe>
  </body>
</html>

到了这里，关于vue、js实现页面全屏的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！