js实现全屏功能——易懂版

翻斗花园-图图

已于 2023-10-13 22:36:28 修改

阅读量1.5k

点赞数

文章标签： javascript 前端

于 2023-10-13 22:21:52 首次发布

本文链接：https://blog.csdn.net/qq_21861771/article/details/133819119

版权

通过js来实现页面的全屏功能：

html部分：

 <button class="column_fell_screen">全屏显示</button>

js部分：

//绑定全屏事件
document.getElementsByClassName('column_fell_screen')[0].addEventListener('click',fullScreen) 
//取消全屏事件
document.getElementsByClassName('column_fell_screen')[0].addEventListener('click',fullExit)

全屏事件：

 function fullScreen() {
        var element = document.documentElement; //若要全屏页面中div，var element= document.getElementById("divID");  
        //IE 10及以下ActiveXObject 
        if (window.ActiveXObject) {
            var WsShell = new ActiveXObject('WScript.Shell')
            WsShell.SendKeys('{F11}');
        }
        //HTML W3C 提议  
        else if (element.requestFullScreen) {
            element.requestFullScreen();
        }
        //IE11  
        else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
        // Webkit (works in Safari5.1 and Chrome 15)  
        else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
        }
        // Firefox (works in nightly)  
        else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        }
       
    }

取消全屏事件：

 //退出全屏  
    function fullExit() {
        var element = document.documentElement; //若要全屏页面中div，var element= document.getElementById("divID");   
        //IE ActiveXObject  
        if (window.ActiveXObject) {
            var WsShell = new ActiveXObject('WScript.Shell')
            WsShell.SendKeys('{F11}');
        }
        //HTML5 W3C 提议  
        else if (element.requestFullScreen) {
            document.exitFullscreen();
        }
        //IE 11  
        else if (element.msRequestFullscreen) {
            document.msExitFullscreen();
        }
        // Webkit (works in Safari5.1 and Chrome 15)  
        else if (element.webkitRequestFullScreen) {
            document.webkitCancelFullScreen();
        }
	}