将某一个 DIV 块全屏展示

博客zhu虎康
373 阅读2分钟

@[toc]

需求

上节我们研究了如何将页面中的指定 div 下载为图片：跳转查看 本节演技一下如何将 DIV 全屏展示

全屏展示某一个 DIV 在这里插入图片描述

在这里插入图片描述

分析

  • 其实就是模拟键盘动作 F11
var element = document.getElementById('pic')
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen
if (requestMethod) {
  requestMethod.call(element)
} else if (typeof window.ActiveXObject !== 'undefined') {
  var wscript = new ActiveXObject('WScript.Shell')
  if (wscript !== null) {
    wscript.SendKeys('{F11}')
  }
}
  • demo1.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>全屏展示</title>
    <style>
        .top {
  margin: 15px;
}
.main {
  width: 100%;
  height: 1000px;
  display: flex;
}
.left {
  width: 50%;
  height: 60%;
  background: gray;
  padding: 20px;
}
.left-son {
  width: 80%;
  height: 50%;
  margin: 15px;
  background: red;
}
.right {
  width: 50%;
  height: 60%;
  background: #dddddd;
}
/* 针对dom的全屏设置 */
.left:-webkit-full-screen {
  background: #fff;
}
/* 全屏属性 */
:-webkit-full-screen {
}
:-moz-full-screen {
}
:-ms-fullscreen {
}
/* 全屏伪类 当前chrome:70 不支持 */
:full-screen {
}
:fullscreen {
  /* IE11支持 */
}
    </style>
</head>

<body>
    <!--
     * @Author: OBKoro1
     * @Github: https://github.com/OBKoro1
     * @Date: 2018-11-15 18:49:33
     * @LastEditors: OBKoro1
     * @LastEditTime: 2018-11-23 18:20:36
     * @Description: 浏览器全屏class类演示demo
     -->
    <div class="top">
        <button onclick="leftScreen()">左边全屏</button>
        <button onclick="rightScreen()">右边全屏</button>
    </div>
    <div class="main">
        <div class="left">
            <button onclick="redScreen()">红色全屏</button>
            <button onclick="exitScreen()">退出全屏</button>
            <div class="left-son">
                <button onclick="exitScreen()">红色退出全屏</button>
                <span>左边的内容</span>
            </div>
        </div>
        <div class="right">右边的内容</div>
    </div>
</body>

</html>

<script>
   class fullScreen {
        /**
         * @description: 全屏初始化
         * @param {Function} fn 用户浏览器不支持全屏的回调
         */
        constructor(fn) {
            this.prefixName = ""; // 浏览器前缀
            this.isFullscreenData = true; // 浏览器是否支持全屏
            this.isFullscreen(fn);
        }
        /**
         * @description: 将传进来的元素全屏
         * @param {String} domName 要全屏的dom名称
         */
        Fullscreen (domName) {
            const element = document.querySelector(domName);
            const methodName =
                this.prefixName === ""
                    ? "requestFullscreen"
                    : `${this.prefixName}RequestFullScreen`;
            element[methodName]();
        }
        // 退出全屏
        exitFullscreen () {
            const methodName =
                this.prefixName === ""
                    ? "exitFullscreen"
                    : `${this.prefixName}ExitFullscreen`;
            document[methodName]();
        }
        /**
         * @description: 监听进入/离开全屏
         * @param {Function} enter 进入全屏的回调
         *  @param {Function} quit 离开全屏的回调
         */
        screenChange (enter, quit) {
            if (!this.isFullscreenData) return;
            const methodName = `on${this.prefixName}fullscreenchange`;
            document[methodName] = e => {
                if (this.isElementFullScreen()) {
                    enter && enter(e); // 进入全屏回调
                } else {
                    quit && quit(e); // 离开全屏的回调
                }
            };
        }
        /**
         * @description: 浏览器无法进入全屏时触发,可能是技术原因，也可能是用户拒绝：比如全屏请求不是在事件处理函数中调用,会在这里拦截到错误
         * @param {Function} enterErrorFn 回调
         */
        screenError (enterErrorFn) {
            const methodName = `on${this.prefixName}fullscreenerror`;
            document[methodName] = e => {
                enterErrorFn && enterErrorFn(e);
            };
        }
        /**
         * @description: 是否支持全屏+判断浏览器前缀
         * @param {Function} fn 不支持全屏的回调函数 这里设了一个默认值
         */
        isFullscreen (fn) {
            let fullscreenEnabled;
            // 判断浏览器前缀
            if (document.fullscreenEnabled) {
                fullscreenEnabled = document.fullscreenEnabled;
            } else if (document.webkitFullscreenEnabled) {
                fullscreenEnabled = document.webkitFullscreenEnabled;
                this.prefixName = "webkit";
            } else if (document.mozFullScreenEnabled) {
                fullscreenEnabled = document.mozFullScreenEnabled;
                this.prefixName = "moz";
            } else if (document.msFullscreenEnabled) {
                fullscreenEnabled = document.msFullscreenEnabled;
                this.prefixName = "ms";
            }
            if (!fullscreenEnabled) {
                this.isFullscreenData = false;
                fn && fn(); // 执行不支持全屏的回调
            }
        }
        /**
         * @description: 检测有没有元素处于全屏状态
         * @return 布尔值
         */
        isElementFullScreen () {
            const fullscreenElement =
                document.fullscreenElement ||
                document.msFullscreenElement ||
                document.mozFullScreenElement ||
                document.webkitFullscreenElement;
            if (fullscreenElement === null) {
                return false; // 当前没有元素在全屏状态
            } else {
                return true; // 有元素在全屏状态
            }
        }
    }
    let full = new fullScreen(() => {
        console.log("不支持");
    });
    full.screenError(e => {
        console.log("进去全屏失败:", e);
    });
    // 全屏请求必须在事件处理函数中调用，否则将会被拒绝。
    full.Fullscreen(".left"); // 触发进去全屏失败回调
    const obj = {
        enter: e => {
            // 如果退出全屏 退出的还是全屏状态，将会触发进入全屏的回调，这种情况比较少 注意一下
            console.log("进入全屏", e);
        },
        quit: e => {
            console.log("退出全屏", e);
            // 通常不会出现嵌套的情况
        }
    };
    full.screenChange(obj.enter, obj.quit);
    function leftScreen () {
        full.Fullscreen(".left");
    }
    function rightScreen () {
        full.Fullscreen(".right");
    }
    function redScreen () {
        full.Fullscreen(".left-son");
    }
    // 退出全屏 退出到上次的状态
    function exitScreen () {
        full.exitFullscreen();
    }
</script>
  • demo2.html
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    #container {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: red;
    }
</style>


<body>
    　　<div id="container">
            <div id="content" style="margin:0 auto;height:45%;width:80%px; background:orange;">
            　　　　<button id="btn">全屏</button>
            　　　　<button id="close">退出</button>
            　　　　<h1>js控制页面部分区域的全屏展示和退出全屏显示</h1>
            　　　　</div>
        　　</div>
</body>
<script language="JavaScript">
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        var elem = document.getElementById("content");
        requestFullScreen(elem);
    };


    var close = document.getElementById("close");
    close.onclick = function () {
        exitFullscreen();
    };


    function requestFullScreen (element) {
        var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
        if (requestMethod) {
            requestMethod.call(element);
        } else if (typeof window.ActiveXObject !== "undefined") {
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript !== null) {
                wscript.SendKeys("{F11}");
            }
        }
    }


    function exitFullscreen () {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }


</script>


</html>
avatar
文章
阅读
粉丝