js's exit full-screen toggle full screen and achieve

Scenario:
For example, many web games like full-screen or online reading novels and so on.

Core code:

// Control full screen 
function the enterFullScreen () { // enter full-screen 
    $ ( " #fullscreen " ) .html ( " Exit Full Screen " );
     var docElm = document.documentElement;
     // the W3C 
    IF (docElm.requestFullscreen) { 
        docElm.requestFullscreen ( ); 
    } 
    // FireFox 
    the else  IF (docElm.mozRequestFullScreen) { 
        docElm.mozRequestFullScreen (); 
    } 
    // the Chrome like 
    the else  IF (docElm.webkitRequestFullScreen) {  
        docElm.webkitRequestFullScreen ();
    } 
    // IE11 of the
    else if(elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    }
}

function exitfullscreen() { //退出全屏
    $("#fullscreen").html("切换全屏");
    if(document.exitFullscreen) {
        document.exitFullscreen();
    } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    } else if(document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

var a = 0;
$('#fullscreen').on('click', function() {
    a++;
    a % 2 == 1 ? enterfullscreen() : exitfullscreen();
})

Front-end code:

<a type="button" id="fullscreen" class="btn btn-default visible-lg visible-md"><i class="fa fa-refresh" aria-hidden="true"></i> 切换全屏</a>

 

Guess you like

Origin www.cnblogs.com/youcong/p/11440596.html