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>