javascript实现浏览器全屏显示和退出全屏代码

浏览器内置全屏浏览网页的功能，通过键盘快捷键F11可以进入全屏模式，而在网页端则可以通过js代码使用requestFullScreen()方法进入浏览器全屏浏览模式，使用exitFullScreen()方法退出浏览器全屏浏览模式。最低支持IE11浏览器。

进入全屏

requestFullScreen()方法

发出一个使元素进入全屏状态的异步请求，进入全屏状态成功，那么会触发document对象的fullscreenchange事件，失败则会会触发document对象的fullscreenerror事件。

注意:

• 包含在顶层文档的标准HTML元素、<svg>元素和<math>元素可以进入全屏状态；
• 默认iframe和object内部的元素不能进入全屏状态；
• iframe的allowfullscreen属性值为true时可以进入全屏状态。

js代码

function activateFullScreen() {
    var element = document.documentElement;
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen(); //IE浏览器
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen(); //Firefox浏览器
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen(); //webkit浏览器，如Chrome
    }
}

说明：

element - 表示要全屏的元素，可以是document.body也可以是指定的div

退出全屏

exitFullScreen()方法在全屏模式下取消元素。

function cancelFullscreen() {
    if(element.exitFullScreen) {
        element.exitFullScreen();
    } else if(element.mozCancelFullScreen) {
        element.mozCancelFullScreen();
    } else if(element.webkitExitFullscreen) {
        element.webkitExitFullscreen();
    } else if(element.msExitFullscreen) {
        element.msExitFullscreen();
    }
}

调用函数

$(function(){
    
    $(element).click(function(){
        activateFullScreen();
    });
   
    $(element).click(function(){
        cancelFullscreen();
    });

})