【JavaScript】------ JavaScript实现窗体全屏,退出全屏或关闭窗体实例代码

秒速五厘米 2022-09-03 00:08 279阅读 0赞

> **1.JavaScript实现窗体全屏,退出全屏或关闭窗体实例代码**

> 1.1 Html 代码:
> 
>     
>             <div class="nav-big-small-exit">
>                 <span class="btn-big-small"><img src="/dcs/bigdata/hua_gong/image/big.png" width="26px"></span>
>                 <span class="btn-exit"><img src="/dcs/bigdata/hua_gong/image/关闭.png" width="26px"></span>
>             </div>
> 
>

> 1.1 JavaScript 代码:
> 
>     //全屏 退出全屏
>             function FullScreen(el) {
>                 var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
>                 if (!isFullscreen) { //进入全屏,多重短路表达式
>                     (el.requestFullscreen && el.requestFullscreen()) ||
>                     (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
>                     (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) || (el.msRequestFullscreen && el.msRequestFullscreen());
>     
>                 } else { //退出全屏,三目运算符
>                     document.exitFullscreen ? document.exitFullscreen() :
>                         document.mozCancelFullScreen ? document.mozCancelFullScreen() :
>                             document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
>                 }
>             }
>     
>             //全屏
>             $(".btn-big-small").on("click", function (e) {
>                 var el = document.documentElement; //target兼容Firefox
>                 var src = $(this).find("img").attr("src");
>                 if (src == "/dcs/bigdata/hua_gong/image/small.png") {
>                     $(this).find("img").attr("src", "/dcs/bigdata/hua_gong/image/big.png");
>                 } else {
>                     $(this).find("img").attr("src", "/dcs/bigdata/hua_gong/image/small.png");
>                 }
>                 FullScreen(el);
>             })
>     
>             //关闭当前窗口
>             $(".btn-exit").on("click", function () {
>                 window.opener = null;
>                 window.open('', '_self');
>                 window.close();
>             })
> 
>