JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件

实现全屏

个人版：
function isFullScreen() {
    var fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.webkitIsFullScreen || document.mozFullScreen;
    if (fullscreenElement) {
        //退出全屏
        if(document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }else if(document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if(document.exitFullscreen) {
            document.exitFullscreen();
        }else if (document.msRequestFullscreen) {
            document.msRequestFullscreen();
        }
    }else {
        //全屏
        launchFullScreen();
    }

};

//封装函数，控制全屏
function launchFullScreen() {
    var element = document.documentElement;
    if(element.requestFullscreen) {
        element.requestFullscreen();
    } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if(element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
};

/**
 * 监听全屏状态变化
 */
document.addEventListener('fullscreenchange', Fn);
document.addEventListener('webkitfullscreenchange', Fn);
document.addEventListener('mozfullscreenchange', Fn);
document.addEventListener('msfullscreenchange', Fn);

function Fn() {
    var fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.webkitIsFullScreen || document.mozFullScreen;
    //全屏按钮切换类
    if (fullscreenElement) {
        //目前全屏
    }else {
        //目前不是全屏
    }
}

付老师版：
full.onclick=function() {

    if(isFullScreen) {

        isFullScreen = false

        if (document.exitFullscreen) {  

            document.exitFullscreen();  

        }  

        else if (document.mozCancelFullScreen) {  

            document.mozCancelFullScreen();  

        }  

        else if (document.webkitCancelFullScreen) {  

            document.webkitCancelFullScreen();  

        }

        else if (document.msExitFullscreen) {

              document.msExitFullscreen();

        }

    } else {

        isFullScreen = true

        var docElm = document.documentElement;

        //W3C  

        if (docElm.requestFullscreen) {  

            docElm.requestFullscreen();  

        }

        //FireFox  

        else if (docElm.mozRequestFullScreen) {  

            docElm.mozRequestFullScreen();  

        }

        //Chrome等  

        else if (docElm.webkitRequestFullScreen) {  

            docElm.webkitRequestFullScreen();  

        }

        //IE11

        else if (docElm.msRequestFullscreen) {

          docElm.msRequestFullscreen();

        }

    }

}

/**

 * 监听全屏状态变化

 */

 document.addEventListener('fullscreenchange', fullScreenChangeFn);

 document.addEventListener('webkitfullscreenchange', fullScreenChangeFn);

 document.addEventListener('mozfullscreenchange', fullScreenChangeFn);

 document.addEventListener('msfullscreenchange', fullScreenChangeFn);  // IE下无效果然

​

 /**

  * 监听屏幕变化的函数

  */

 function fullScreenChangeFn(){

     /*

     * 获取被全屏的元素，没有返回null

     * document.fullscreenElement

     * document.webkitFullscreenElement

     * document.mozFullScreenElement

     * 

     * 返回是否全屏·布尔值

     * document.webkitIsFullScreen

     * document.mozFullScreen

     * */

     // 判断是否是全屏

     var  isFull = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.webkitIsFullScreen || document.mozFullScreen;

     if (isFull) {

         // 全屏状态

     } else {

         // 非全屏状态  

     }

 }