• JS浏览器全屏


    JS浏览器全屏

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<input id="Button1" type="button" value="开启全屏" onclick="kaishi()" />  
    		<input id="Button2" type="button" value="关闭全屏" onclick="guanbi()" />  
    	</body>
    	<script>
    //		 开始全屏
        function kaishi()  
        {  
            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 (elem.msRequestFullscreen) {  
                elem.msRequestFullscreen();  
            }  
        }  
      
    //  退出全屏
        function guanbi() {  
      
      
            if (document.exitFullscreen) {  
                document.exitFullscreen();  
            }  
            else if (document.mozCancelFullScreen) {  
                document.mozCancelFullScreen();  
            }  
            else if (document.webkitCancelFullScreen) {  
                document.webkitCancelFullScreen();  
            }  
            else if (document.msExitFullscreen) {  
                document.msExitFullscreen();  
            }  
        }  
      
      
    //事件监听
    //
    //  document.addEventListener("fullscreenchange", function () {  
    // 
    //      fullscreenState.innerHTML = (document.fullscreen) ? "" : "not ";  
    //      alert("1531");
    //  }, false);  
    //    
    //  document.addEventListener("mozfullscreenchange", function () {  
    //       
    //      fullscreenState.innerHTML = (document.mozFullScreen) ? "" : "not ";  
    //  }, false);  
    //   
    //  document.addEventListener("webkitfullscreenchange", function () {  
    //        
    //      fullscreenState.innerHTML = (document.webkitIsFullScreen) ? "" : "not ";  
    //  }, false);  
    //    
    //  document.addEventListener("msfullscreenchange", function () {  
    //        
    //      fullscreenState.innerHTML = (document.msFullscreenElement) ? "" : "not ";  
    //  }, false);  
      
    	</script>
    </html>
    
    
  • 相关阅读:
    JS高程研读记录一【事件流】
    事件冒泡的应用——jq on的实现
    模式学习小结[工厂模式|构造函数|原型模式]
    几个CSS-content的小例子
    构造函数new执行与直接执行的区别
    gulp布局构建小结
    理解上下文与作用域
    定义变量的注意问题
    JUC的世界III
    JUC的世界II
  • 原文地址:https://www.cnblogs.com/yu-si/p/13139143.html
Copyright © 2020-2023  润新知