数据大屏 js指定某元素全屏展示

本文介绍了简单的页面全屏功能，测试是在vue+elementUI项目中，可以根据各自需要进行修改调整

html

<div>
    <el-button id="alarm-fullscreen-toggler" @click="fillScreen">全屏按钮</el-button>
    <el-button id="exitFullScreen" @click="exitScreen">关闭全屏按钮</el-button>
    
    <div id="content">我将大屏显示</div>
  </div>

js

methods:{
    fillScreen(){
      var elem = document.getElementById("content");  //获取到需要大屏展示的元素
      console.log(elem); 
      this.requestFullScreen(elem); 
    },
    requestFullScreen(element){
      var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; 
      if (requestMethod) { 
       requestMethod.call(element); 
      } else if (typeof window.ActiveXObject !== "undefined") { 
      // for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
      var wscript = new ActiveXObject("WScript.Shell"); 
      if (wscript !== null) { 
        wscript.SendKeys("{F11}"); 
      } 
    },
    exitScreen(element){
        var requestMethod = element.cancelFullScreen || element.webkitCancelFullScreen || element.mozCancelFullScreen || element.exitFullScreen; 
        if (requestMethod) { 
           requestMethod.call(element); 
        }
        else if (typeof window.ActiveXObject !== "undefined") {
            //for IE，这里和fullScreen相同，模拟按下F11键退出全屏
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript != null) {
                wscript.SendKeys("{F11}");
            }
        }
    }
}

style

<style lang="scss" scoped>
#content{
  margin:0 auto;height:500px;width:700px; background:#ccc;
}
#content:-webkit-full-screen {
 background-color:rgb(255, 255, 12);
//  width: 100%;
//  height: 100%;
}
</style>

如果div不设置background style则使用webkitRequestFullScreen全屏时，div会被黑色填充.

浏览器显示差异：

这里值得注意的是safari和谷歌浏览器之间差异，在谷歌浏览器不受width和height值影响，会伸展以便铺满屏幕。而safari浏览器中获得相同的全屏行为，您需要添加自己的width：100％; height：100％;

默认是点击esc退出全屏

也可以通过监听点击退出全屏事件执行，以下为参考代码

//监听window是否全屏，并进行相应的操作,支持esc键退出
window.onresize = function() {
    var isFull=!!(document.webkitIsFullScreen || document.mozFullScreen || 
        document.msFullscreenElement || document.fullscreenElement
    );//!document.webkitIsFullScreen都为true。因此用!!
    if (isFull==false) {
        document.getElementById('exitFullscreen').style.display = "none";
        document.getElementById('alarm-fullscreen-toggler').style.display = "";
    }else{
        document.getElementById('exitFullscreen').style.display = "";
        document.getElementById('alarm-fullscreen-toggler').style.display = "none";
    }
}