js实现窗口全屏示例

最新推荐文章于 2024-06-29 00:44:50 发布

vcxiaohan2

最新推荐文章于 2024-06-29 00:44:50 发布

阅读量5.1k

点赞数 3

分类专栏： html5 文章标签： javascript

本文链接：https://blog.csdn.net/u011500781/article/details/52896368

版权

html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

该 demo 包含全屏事件、退出全屏事件以及屏幕状态改变的钩子函数的封装
以下是一个完整示例，只需整体拷贝下来运行即可(注意引入了 jquery)
请在这里查看示例☞ fullscreen示例

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 窗口全屏样式 */
        html:-moz-full-screen { 
            background: grey; 
        } 
        html:-webkit-full-screen { 
            background: grey; 
        } 
        html:fullscreen { 
            background: grey; 
        }

        div {
            width: 100px;
            height: 100px;
            background: blue;
        }
        img {
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
    <button class="win-fullscreen">窗口全屏</button>
    <button class="div-fullscreen">div全屏</button>
    <button class="img-fullscreen">img全屏</button>
    <button class="exit-fullscreen">退出全屏</button>
    <div class="div">
        <img class="img" src="images/a.png">
    </div>
</body>
<script>
    /* 调用示例 */
    // 窗口全屏
    $('.win-fullscreen').on('click', function() {
        requestFullScreen(document.documentElement);
    });

    // div全屏
    $('.div-fullscreen').on('click', function() {
        requestFullScreen($('.div')[0]);
    });

    // img全屏
    $('.img-fullscreen').on('click', function() {
        requestFullScreen($('.img')[0]);
    });

    // 退出全屏
    $('.exit-fullscreen').on('click', function() {
        exitFull();
    });

    // 窗口状态改变事件
    fullscreenchange(document, function(isFull) {
        console.log(isFull);
    });

    /* 封装 */
    // 窗口状态改变
    function fullscreenchange(el, callback) {
        el.addEventListener("fullscreenchange", function () { 
            callback && callback(document.fullscreen);
        }); 
        el.addEventListener("webkitfullscreenchange", function () { 
            callback && callback(document.webkitIsFullScreen);
        }); 
        el.addEventListener("mozfullscreenchange", function () { 
            callback && callback(document.mozFullScreen);
        }); 
        el.addEventListener("msfullscreenchange", function () { 
            callback && callback(document.msFullscreenElement);
        });
    }

    // 全屏
    function requestFullScreen(element) {
        var requestMethod = element.requestFullScreen || //W3C
        element.webkitRequestFullScreen ||    //Chrome等
        element.mozRequestFullScreen || //FireFox
        element.msRequestFullScreen; //IE11
        if (requestMethod) {
            requestMethod.call(element);
        }else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript !== null) {
                wscript.SendKeys("{F11}");
            }
        }
    }

    //退出全屏
    function exitFull() {
        var exitMethod = document.exitFullscreen || //W3C
        document.mozCancelFullScreen ||    //Chrome等
        document.webkitExitFullscreen || //FireFox
        document.webkitExitFullscreen; //IE11
        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}");
            }
        }
    }
</script>
</html>

参考文章

vcxiaohan2

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
js实现窗口全屏示例

前言该 demo 包含全屏事件、退出全屏事件以及屏幕状态改变的钩子函数的封装以下是一个完整示例，只需整体拷贝下来运行即可(注意引入了 jquery)示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo</title> <script src="js/jquery-1.11
复制链接

扫一扫