JS实现全屏的四种写法

JS或jQuery实现全屏

JS写法一

.html

<div class="container"   <button id="full-screen">全屏</button>   <button id="exit-fullscreen">退出</button></div>

.css

/* Basic element styles */  html {    color: #000;    background: paleturquoise;    min-height: 100%;   }  /* Structure */  .container {   text-align: center;   width: 500px;   min-height: 600px;   background: #fff;   border: 1px solid #ccc;   border-top: none;   margin: 20px auto;   padding: 20px;   border-radius: 10px;   -moz-border-radius: 10px;   -webkit-border-radius: 10px;   box-shadow: 1px 1px 10px #000;   -moz-box-shadow: 1px 1px 10px #000;   -webkit-box-shadow: 1px 1px 5px #000;  }  button{   margin: 200px auto;   width: 100px;   height: 30px;   background-color: aliceblue;  }  /* Fullscreen */  html:-moz-full-screen {   background: blue;  }  html:-webkit-full-screen {   background: blue;  }  html:-ms-fullscreen {   background: blue;   width: 100%; /* needed to center contents in IE */  }  html:fullscreen {   background: blue;  }

.js

(function () {  var viewFullScreen = document.getElementById("full-screen");  if (viewFullScreen) {   viewFullScreen.addEventListener("click", function () {    var docElm = document.documentElement;    if (docElm.requestFullscreen) {     docElm.requestFullscreen();    }    else if (docElm.msRequestFullscreen) {     docElm.msRequestFullscreen();    }    else if (docElm.mozRequestFullScreen) {     docElm.mozRequestFullScreen();    }    else if (docElm.webkitRequestFullScreen) {     docElm.webkitRequestFullScreen();    }   }, false);  }  var cancelFullScreen = document.getElementById("exit-fullscreen");  if (cancelFullScreen) {   cancelFullScreen.addEventListener("click", function () {    if (document.exitFullscreen) {     document.exitFullscreen();    }    else if (document.msExitFullscreen) {     document.msExitFullscreen();    }    else if (document.mozCancelFullScreen) {     document.mozCancelFullScreen();    }    else if (document.webkitCancelFullScreen) {     document.webkitCancelFullScreen();    }   }, false);  }  var fullscreenState = document.getElementById("fullscreen-state");  if (fullscreenState) {   document.addEventListener("fullscreenchange", function () {    fullscreenState.innerHTML = (document.fullscreenElement)? "" : "not ";   }, false);   document.addEventListener("msfullscreenchange", function () {    fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";   }, false);   document.addEventListener("mozfullscreenchange", function () {    fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";   }, false);   document.addEventListener("webkitfullscreenchange", function () {    fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";   }, false);  } })();

JS写法二