前端页面实现全屏的两种方法(没有页面加载时就全屏和触发事件全屏的办法，不要浪费无谓的时间)_首次加载全屏

作者：2023面试高手 | 2024-03-21 23:38:29

踩

首次加载全屏

问题背景:最近工作时遇到一个问题，需要把页面展示到康佳牌子的大电视上面，起初是在电视上面装了个浏览器，也能正常访问，但是问题是我需要页面全屏展示，但是这个电视不支持触屏(我的代码是点击页面全屏展示)，只能通过遥控器选择点击，但是在电视上点击后就变成白屏了。

解决过程:后面在网上搜了各种办法，都是需要点击的，没有那种网页在加载时就全屏的办法，或者在页面加个按钮，访问页面时自动触发按钮事件。按钮的点击事件确实能触发，但是页面就是不能全屏，应该是点击事件和真正的鼠标点击还是有区别的；尝试了自动触发按钮事件和模拟按下按钮键值的方法都不行，最后无奈放弃。

问题解决:按照领导要求解决不了，最后是用投屏软件投屏，增加了一个投屏电脑，但是这种方式对网络要求比较高，还有就是投屏软件收费，找了好久才找到一个破解版的，有需要的小伙伴可以私信哦(只支持同一个网络下投屏)。

对了，win10和win11有自带投屏的功能，就不需要投屏软件了，但是有时候就是这么奇葩，我们公司的那台笔记本是win7，更离谱的是win10和win11支持很多电视投屏就是不支持康佳，本来还想把笔记本重装一下系统，后来发现不支持康佳，也只能作罢。

win10与win11支持投屏的品牌电视列表:

页面全屏代码:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>点击页面全屏显示</title>
        <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    </head>
    <body>
        <div style="border: solid; width: 200px;height: 200px;"></div>
    </body>
    
    
    <script>
    //第一种方法
    /*var test = document.getElementsByTagName("html")[0];
    test.onclick = function () {
        if (this.requestFullscreen) {
            this.requestFullscreen();
        }
        else if (this.mozRequestFullScreen) {
            console.log(this.mozRequestFullScreen);
            this.mozRequestFullScreen();
        }
        else if (this.webkitRequestFullScreen) {
            console.log(this.webkitRequestFullScreen);
            this.webkitRequestFullScreen();
        }
    }*/
    
    //第二种方法
    $('html').click(()=>{
      let el = document.documentElement;
      let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen; 
      if(typeof rfs != 'undefined' && rfs){
        rfs.call(el)
      }
     else if(typeof window.ActiveXObject != 'undefined'){
        let wscript = new ActiveXObject('WScript.Shell');
        if(wscript != null){
          wscript.SendKeys('{F11}')
        }
      }
    })
    
</script>
    
    
</html>

效果展示:

点击页面前:

点击页面后:

两种方法都是点击页面就能全屏，再说一遍，目前为止做不到网页加载时就让页面全屏的，我已经帮大家踩过坑了，各位不要再浪费时间了！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/283593