• vue、js实现页面全屏

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

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

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

    1. import { useFullscreen } from '@vueuse/core'
    2.  
    3. const { isFullscreen, enter, exit, toggle } = useFullscreen();
    4.  
    5. toggle();

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

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

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

    1. html>
    2. <html>
    3.   <head>
    4.     <script>
    5.       window.onload = openfullscreen();
    6.  
    7.       function launchIntoFullscreen(element) {
    8.         if (element.requestFullscreen) {
    9.           element.requestFullscreen();
    10.         } else if (element.mozRequestFullScreen) {
    11.           element.mozRequestFullScreen();
    12.         } else if (element.webkitRequestFullscreen) {
    13.           element.webkitRequestFullscreen();
    14.         } else if (element.msRequestFullscreen) {
    15.           element.msRequestFullscreen();
    16.         }
    17.       }
    18.  
    19.       function openfullscreen() {
    20.         launchIntoFullscreen(document.documentElement);
    21.       }
    22.  
    23.       function exitFullscreen() {
    24.         if (document.exitFullscreen) {
    25.           document.exitFullscreen();
    26.         } else if (document.mozCancelFullScreen) {
    27.           document.mozCancelFullScreen();
    28.         } else if (document.webkitExitFullscreen) {
    29.           document.webkitExitFullscreen();
    30.         }
    31.         window.close();
    32.       }
    33.  
    34.       function fix() {
    35.         var screenwidth = screen.width;
    36.         var screenhei = screen.height;
    37.         document.getElementById("ifam").width = screenwidth;
    38.         document.getElementById("ifam").height = screenhei;
    39.       }
    40.     script>
    41.     <style>
    42.       #ifam {
    43.         position: fixed;
    44.         left: 0%;
    45.         top: 0%;
    46.         z-index: -1;
    47.       }
    48.       #fullscreen {
    49.         position: fixed;
    50.         left: 0%;
    51.         top: 0%;
    52.         z-index: 1;
    53.       }
    54.     style>
    55.   head>
    56.   <body onload="fix()">
    57.     <div id="fullscreen">
    58.       <button onclick="openfullscreen()">Openbutton>
    59.       <button onclick="exitFullscreen()">Exitbutton>
    60.     div>
    61.     <iframe id="ifam" src="https://docs.python.org">iframe>
    62.   body>
    63. html>

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

    1. <html>
    2.   <head>
    3.     <script language="jscript">
    4.       function goFullscreen() {
    5.         // Must be called as a result of user interaction to work
    6.         mf = document.getElementById("main_frame");
    7.         mf.webkitRequestFullscreen();
    8.         mf.style.display = "";
    9.       }
    10.       function fullscreenChanged() {
    11.         if (document.webkitFullscreenElement == null) {
    12.           mf = document.getElementById("main_frame");
    13.           mf.style.display = "none";
    14.         }
    15.       }
    16.       document.onwebkitfullscreenchange = fullscreenChanged;
    17.       document.documentElement.onclick = goFullscreen;
    18.       document.onkeydown = goFullscreen;
    19.     script>
    20.   head>
    21.   <body style="margin: 0">
    22.     <h1>
    23.       Click anywhere or press any key to browse <u>Python documentationu> in
    24.       fullscreen.
    25.     h1>
    26.     <iframe
    27.       id="main_frame"
    28.       src="https://docs.python.org"
    29.       style="width: 100%; height: 100%; border: none; display: none"
    30.     >iframe>
    31.   body>
    32. html>

  • 相关阅读:
    docker compose 管理应用服务的常用命令
    【控制】自适应控制，对参考信号跟踪，对未知参数估计的小例子，带程序有结果图
    【Linux】进程间通信3——system V共享内存
    【Android Studio学习】第一篇、制作一个拥有登录和注册功能的简易APP
    ThreadLocal类与synchronize关键字区别----一个简单示例
    作为产品经理，你是如何分析和管理你的产品需求的？
    UNet - 数据加载 Dataset
    （2023，ControlNet，CFGRW，diffusion，控制组合）向文本到图像扩散模型添加条件控制
    子进程变成僵尸进程
    BUUCTF WEB PICKLE STORE
  • 原文地址：https://blog.csdn.net/guo__hang/article/details/132718703