通过javascript控制页面全屏显示

我就是我 2021-12-03 08:10 338阅读 0赞

由于项目的需要，有时候需要对页面进行全屏显示，说到底就是就是我们常用的F11，H5提供了相应的API，目前google chrome 15 +, safri5.1+,firfox10+,IE1能够很好的支持该属性，低版本的IE可以通过ActiveX插件实现。

简单粗暴，直接上代码

**定义全屏显示函数**

function fullScreen() {
    
      var el = document.documentElement;
    
      var rfs = el.requestFullScreen || el.webkitRequestFullScreen || 
    
          el.mozRequestFullScreen || el.msRequestFullScreen;
    
      if(typeof rfs != "undefined" && rfs) {
    
        rfs.call(el);
    
      } else if(typeof window.ActiveXObject != "undefined") {
    
        //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
    
        var wscript = new ActiveXObject("WScript.Shell");
    
        if(wscript != null) {
    
            wscript.SendKeys("{F11}");
    
        }
    
      }
    }

**定义退出全屏的函数**

function exitFull() {
      // 判断各种浏览器，找到正确的方法
      var exitMethod = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.webkitExitFullscreen; 
      if (exitMethod) {
        exitMethod.call(document);
      }
      else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
          wscript.SendKeys("{F11}");
        }
      }
    }

下面的就不多说了，就剩下各种场景的调用了。

发表评论取消回复

表情：

评论列表（有 0 条评论，338人围观）

还没有评论，来说两句吧...

相关阅读

相关 Openlayers实战：全屏显示

Openlayers地图中，全屏显示算是一个比较重要的组件了，经常会在演示的场景用到或者在多数据要展现的时候用到。在我们的实战课程里，详细讲一下其做法并配置其属性。效果

た入场券/ 2024年03月17日 15:16/ 0 赞/ 58 阅读

相关页面插入视频，并实现全屏显示

muted ：若想实现视频循环播放，必须要加上此属性 loop ：实现循环播放，必须和muted一起使用 <video muted autoplay loop s

迷南。/ 2023年01月15日 11:27/ 0 赞/ 349 阅读

相关 js 页面全屏

//该方法要有点击事件触发才能实现全屏效果 function launchFullScreen(element) { / 处理全屏/

﹏ヽ暗。殇╰゛Y/ 2023年01月03日 01:21/ 0 赞/ 174 阅读

相关 javaScript实现全屏页面滚动效果(优化)

在我读完javaScript DOM之后，对解释型的javaScript脚本语言有了更加深刻的感悟和理解，并使我的javaScript代码更加规范化。接下来，我们转入今天我

淩亂°似流年/ 2022年09月25日 13:19/ 0 赞/ 233 阅读

相关 JavaScript控制全屏，监听退出全屏事件

> 本文转自：[https://www.cnblogs.com/yiven/p/7885528.html][https_www.cnblogs.com_yiven_p_7885

雨点打透心脏的1/2处/ 2022年05月19日 13:38/ 0 赞/ 1309 阅读

相关 js实现页面全屏

//该方法要有点击事件触发才能实现全屏效果 function launchFullScreen(element) { / 处理全屏/

比眉伴天荒/ 2022年04月08日 08:47/ 0 赞/ 308 阅读

相关 js设置页面全屏

html代码  <img id="alarm-fullscreen-toggler" src="/public/index/

小鱼儿/ 2021年12月22日 08:29/ 0 赞/ 396 阅读

相关页面全屏显示JS代码

1、直接在页面加载时就全屏。 <body οnlοad="window.open(document.location,'big','fullscreen=yes')；wind

待我称王封你为后i/ 2021年12月14日 10:39/ 0 赞/ 428 阅读

相关通过javascript控制页面全屏显示

由于项目的需要，有时候需要对页面进行全屏显示，说到底就是就是我们常用的F11，H5提供了相应的API，目前google chrome 15 +, safri5.1+,firfo

我就是我/ 2021年12月03日 08:10/ 0 赞/ 339 阅读

相关 JavaScript实现全屏与退出全屏功能

js全屏与退出全屏 //全屏显式 function showFull() { var full = docu

待我称王封你为后i/ 2021年08月28日 20:10/ 0 赞/ 555 阅读