1. 程式人生 > >利用js如何做到讓頁面全屏和不全屏功能

利用js如何做到讓頁面全屏和不全屏功能

Element.requestFullscreen() 方法用於發出非同步請求使元素進入全屏模式。

以下demo是頁面進行全屏和正常螢幕的,你也可以用元素來進行全屏,當然

<!doctype html>
<html>
    <head>
    	<meta charset="UTF-8"/>
        <title>全屏不全屏</title>
    </head>
    <body>
          <input id="fullScreen" type="button" value="全屏"/>
			<input id="fullScreenNormal" type="button" value="正常"/>
     </body>
</html>
<script>
       document.getElementById("fullScreen").onclick=function(){
       		if(document.documentElement.RequestFullScreen){
       			document.documentElement.RequestFullScreen();
       		}
       		//相容火狐
       		console.log(document.documentElement.mozRequestFullScreen)
       		if(document.documentElement.mozRequestFullScreen){
       			document.documentElement.mozRequestFullScreen();
       		}
       		//相容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
       		if(document.documentElement.webkitRequestFullScreen){
       			document.documentElement.webkitRequestFullScreen();
       		}
       		//相容IE,只能寫msRequestFullscreen
       		if(document.documentElement.msRequestFullscreen){
       			document.documentElement.msRequestFullscreen();
       		}
       }
       document.getElementById("fullScreenNormal").onclick=function(){
       		if(document.exitFullScreen){
       			document.exitFullscreen()
       		}
//     		//相容火狐
//     		console.log(document.mozExitFullScreen)
       		if(document.mozCancelFullScreen){
       			document.mozCancelFullScreen()
       		}
//     		//相容谷歌等
       		if(document.webkitExitFullscreen){
       			document.webkitExitFullscreen()
       		}
//     		//相容IE
       		if(document.msExitFullscreen){
       			document.msExitFullscreen()
       		}
       }
</script>