vue、js实现页面全屏

原创已于 2023-09-06 16:55:31 修改 · 1.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

Vue

于 2023-09-06 16:53:00 首次发布

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

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

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

import { useFullscreen } from '@vueuse/core'

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

toggle();

同理这个应该也可以实现（没有测试）

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>

标签

#html #前端 #vue.js #javascript