全屏放大指定区域

最新推荐文章于 2023-08-21 15:24:44 发布

shihezhengshz

最新推荐文章于 2023-08-21 15:24:44 发布

阅读量339

点赞数

分类专栏：成长的路文章标签： js javascript vue

本文链接：https://blog.csdn.net/shihezhengshz/article/details/115582106

版权

成长的路专栏收录该内容

34 篇文章 0 订阅

订阅专栏

做页面有个需求需要全屏指定区域的需求，有些东西需要记录一下

1.判断浏览器是否支持全屏（一般都支持吧→_→。。。）

// 判断能不能全屏
// console.log('支持全屏？',document.fullscreenEnabled)

2.记得全屏指定区域背景色别为透明，不然全屏后默认会变黑的噢

3.获取当前全屏状态

this.fullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement

4.具体代码（vue框架，methods函数）

// 全屏&退出全屏
screen(){
    // 判断能不能全屏
    // console.log('支持全屏？',document.fullscreenEnabled)
    // 还得做兼容，全屏后无背景色或者背景色为透明的话，是会变黑的
    let element = document.getElementById('gantt');//设置后就是   id==con_lf_top_div 的容器全屏
    this.fullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement
    // 退出全屏
    if (this.fullscreen) {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    } 
    // 全屏
    else {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
        }
    }
},

5.做一页够我写几篇文章了，ε=(´ο｀*)))唉