js全屏，退出全屏操作

优倍网络

于 2019-04-03 18:10:01 发布

阅读量718

点赞数 1

分类专栏： html开发实践

本文链接：https://blog.csdn.net/qq_27987023/article/details/89001757

版权

html开发实践专栏收录该内容

12 篇文章 0 订阅

订阅专栏

实现效果：点击 “全屏显示”，网站全屏，显示 “退出全屏” 按钮；反向操作同理

html:

<li class="layui-nav-item to-index" id="fullScreen"><a href="javascript:void(0)" onclick="fullScreen()">全屏显示</a></li>
<li class="layui-nav-item to-index" style="display: none" id="exitScreen"><a href="javascript:void(0)" onclick="exitScreen()">退出全屏</a></li>

js：

//全屏
function fullScreen(){
    $("#fullScreen").css({"display":"none"});
    $("#exitScreen").css({"display":"inline-block"});
    var el = document.documentElement;
    var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;      
        if(typeof rfs != "undefined" && rfs) {
            rfs.call(el);
        };
      return;
}
//退出全屏
function exitScreen(){
    $("#fullScreen").css({"display":"inline-block"});
    $("#exitScreen").css({"display":"none"});
    if (document.exitFullscreen) {  
        document.exitFullscreen();  
    }  
    else if (document.mozCancelFullScreen) {  
        document.mozCancelFullScreen();  
    }  
    else if (document.webkitCancelFullScreen) {  
        document.webkitCancelFullScreen();  
    }  
    else if (document.msExitFullscreen) {  
        document.msExitFullscreen();  
    } 
    if(typeof cfs != "undefined" && cfs) {
        cfs.call(el);
    }
}