js,jquery点击按钮时显示全屏，F11效果

今天小编在做一个后台的管理系统模板，奇葩客户希望要一个放大全屏的功能，类似部分浏览器的F11键，废话不多说，上码！

前端代码如下：

<button id="screen">全屏展示</button>

Js代码如下：

// 封装了两个方法
// 打开全屏
function fullScreen(){
    var elem = document.body;  
    if(elem.webkitRequestFullScreen){  
        elem.webkitRequestFullScreen();     
    }else if(elem.mozRequestFullScreen){  
        elem.mozRequestFullScreen();  
    }else if(elem.requestFullScreen){  
        elem.requestFullscreen();  
    }else{  
        // 浏览器不支持全屏API或已被禁用
        console.log("Screen Error: The browser has disabled this feature.");  
    }  
}

// 关闭全屏
function exitFullScreen(){
    var elem = document;  
    if(elem.webkitCancelFullScreen){  
        elem.webkitCancelFullScreen();      
    }else if(elem.mozCancelFullScreen){  
        elem.mozCancelFullScreen();  
    }else if(elem.cancelFullScreen){  
        elem.cancelFullScreen();  
    }else if(elem.exitFullscreen){  
        elem.exitFullscreen();  
    }else{  
        // 浏览器不支持全屏API或已被禁用
        console.log("Screen Error: The browser has disabled this feature."); 
    }  
}

引入jQuery文件，代码如下：

var screen = 1;
// 当然你也可以使用toggle
$("#screen").click(function(){
    if(screen%2==1){
        $(".codelearn-screen a").attr('title', '退出全屏');
        fullScreen();
    }else{
        $(".codelearn-screen a").attr('title', '全屏展示');
        exitFullScreen();
    }
    screen++;
});