点击div全屏显示，再次点击取消全屏

最新推荐文章于 2024-04-20 18:01:19 发布

chushengzhu4618

最新推荐文章于 2024-04-20 18:01:19 发布

阅读量1.3k

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3502029/blog/2995207

版权

<div id="demo">
  测试
</div>

<script>
        var status = 1;
        (function () {
            var viewFullScreen = document.getElementById("demo");
            if (viewFullScreen) {
                viewFullScreen.addEventListener("click", function () {
                    if (status == 1){ //全屏
                        var docElm = document.getElementById("demo");
                        if (docElm.requestFullscreen) {
                            docElm.requestFullscreen();
                        }
                        else if (docElm.msRequestFullscreen) {
                            docElm = document.body;
                            docElm.msRequestFullscreen();
                        }
                        else if (docElm.mozRequestFullScreen) {
                            docElm.mozRequestFullScreen();
                        }
                        else if (docElm.webkitRequestFullScreen) {
                            docElm.webkitRequestFullScreen();
                        }
                        status = 2;
                    }else if (status == 2) { //关闭全屏
                        if (document.exitFullscreen) {
                            document.exitFullscreen();
                        }
                        else if (document.msExitFullscreen) {
                            document.msExitFullscreen();
                        }
                        else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen();
                        }
                        else if (document.webkitCancelFullScreen) {
                            document.webkitCancelFullScreen();
                        }
                        status = 1;
                    }
                }, false);
            }
        })();
    </script>

转载于:https://my.oschina.net/u/3502029/blog/2995207