数据可视化大屏全屏/退出全屏_大屏可视化数据 web应用程序全屏-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_48607837/article/details/132424934

文章介绍了如何在JavaScript中为按钮点击事件添加全屏和退出全屏功能，包括使用requestFullScreen和cancelFullScreenAPI，以及在IE中模拟全屏切换的代码。同时，还展示了如何监听键盘事件以实现全屏控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给按钮点击事件@click=‘fullScreen()’
定义全屏方法，关闭全屏方法

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

// 关闭全屏
    exitFullScreen() {
      let el = document;
      let cfs =
        el.cancelFullScreen ||
        el.mozCancelFullScreen ||
        el.msExitFullscreen ||
        el.webkitExitFullscreen ||
        el.exitFullscreen;
      if (cfs) {
        // typeof cfs != "undefined" && cfs
        cfs.call(el);
      } else if (typeof window.ActiveXObject !== "undefined") {
        // for IE，这里和fullScreen相同，模拟按下F11键退出全屏
        let wscript = new ActiveXObject("WScript.Shell"); //eslint-disable-line
        if (wscript != null) {
          wscript.SendKeys("{F11}");
        }
      }
    },

在点击事件中调用全屏，关闭全屏的方法

// 全屏点击事件（这个方法只用来手动操作全屏和关闭全屏）
    fullScreen() {
      var isFull = this.isFullScreen();
      if (isFull) {
        this.exitFullScreen();
      } else {
        this.setFullScreen();
      }
        console.log(this.isFullScreen(),'=====================isFull');
    },

想要用键盘也来监听就用以下代码

// 全屏点击事件
    fullScreen() {
      var isFull = this.isFullScreen();
      if (isFull) {
        this.exitFullScreen();
      } else {
        this.setFullScreen();
      }
      // 监听键盘操作
      window.addEventListener('keydown',(e)=> {
            var isFull = this.isFullScreen()
            e = e || window.event
              if(e.keyCode == 122 && !isFull) {
                  e.preventDefault()
                  this.setFullScreen()
              }
        })
        console.log(this.isFullScreen(),'=====================isFull');
    },

写完js以后html中用if判断全屏，退出全屏的字体展示

<div v-if="this.isFullScreen() == false" style="width: 0.1rem; color: #00cbff">全屏</div>
<div v-if="this.isFullScreen() == true" style="width: 0.1rem; color: #00cbff">退出全屏</div>