CSS网页全屏

最新推荐文章于 2024-07-31 15:28:49 发布

转载最新推荐文章于 2024-07-31 15:28:49 发布 · 334 阅读

文章标签：

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
	<title>全屏</title>
</head>

<body >
	<style>
		 #fullscreen{
			width:40px;
			height:40px;
			position:fixed;
			top:20px;
			right:20px;
			opacity:0.4;
		 }
     </style>
	<div id="fullscreen" fullflag ="0">全屏</div>
		
	<script>
    
	document.getElementById("fullscreen").onclick=function(){
	    //var elem = document.getElementById("content");
	    //var h1 = document.getElementById("h1");
	    //requestFullScreen(elem);// 某个页面元素
		
		var flag =this.getAttribute("fullflag");
		if(flag == 0){
			
			requestFullScreen(document.documentElement);// 整个网页
			this.innerHTML= "退出";	
			this.setAttribute("fullflag",'1');
		}else{
			this.innerHTML="全屏";	
			this.setAttribute("fullflag",'0');
			exitFull()
			
		}
	    
	};

	function requestFullScreen(element) {
	    // 判断各种浏览器，找到正确的方法
	    var requestMethod = element.requestFullScreen || //W3C
	    element.webkitRequestFullScreen ||    //Chrome等
	    element.mozRequestFullScreen || //FireFox
	    element.msRequestFullScreen; //IE11
	    if (requestMethod) {
	        requestMethod.call(element);
	    }
	    else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
	        var wscript = new ActiveXObject("WScript.Shell");
	        if (wscript !== null) {
	            wscript.SendKeys("{F11}");
	        }
	    }
	}

	//退出全屏 判断浏览器种类
	function exitFull() {
	    // 判断各种浏览器，找到正确的方法
	    var exitMethod = document.exitFullscreen || //W3C
	    document.mozCancelFullScreen ||    //Chrome等
	    document.webkitExitFullscreen || //FireFox
	    document.webkitExitFullscreen; //IE11
	    if (exitMethod) {
	        exitMethod.call(document);
	    }
	    else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
	        var wscript = new ActiveXObject("WScript.Shell");
	        if (wscript !== null) {
	            wscript.SendKeys("{F11}");
	        }
	    }
	}
    
	</script>
</body>
</html>