JS实现全屏的四种写法

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

/* 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;  }

(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);  } })();

<div style="margin:0 auto;height:600px;width:700px;"> <button id="btn">全屏</button> <div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;" >  <h1>全屏展示和退出全屏</h1> </div></div>

document.getElementById("btn").onclick=function(){  var elem = document.getElementById("content");  requestFullScreen(elem);  /*   注意这里的样式的设置表示全屏显示之后的样式，   退出全屏后样式还在，   若要回到原来样式，需在退出全屏里把样式还原回去   (见写法三)   */  elem.style.height = '800px';  elem.style.width = '1000px'; }; function requestFullScreen(element) {  var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;  if (requestMethod) {   requestMethod.call(element);  } else if (typeof window.ActiveXObject !== "undefined") {   var wscript = new ActiveXObject("WScript.Shell");   if (wscript !== null) {    wscript.SendKeys("{F11}");   }  } }

<div style="margin:0 auto;height:600px;width:700px;"> <div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;" >  <button id="btn">全屏</button>  <h1>全屏展示和退出全屏</h1>  <button id="btnn" >退出</button> </div></div>

document.getElementById("btn").onclick=function(){  var elem = document.getElementById("content");  requestFullScreen(elem);  /*   注意这里的样式的设置表示全屏显示之后的样式，   退出全屏后样式还在，   若要回到原来样式，需在退出全屏里把样式还原回去   */  elem.style.height = '800px';  elem.style.width = '1000px'; };document.getElementById("btnn").onclick=function () {  exitFullscreen(); }; /*  全屏显示  */function requestFullScreen(element) { var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; requestMethod.call(element); }; /*  全屏退出  */function exitFullscreen() {  var elem = document;  var elemd = document.getElementById("content");  if (elem.webkitCancelFullScreen) {   elem.webkitCancelFullScreen();  } else if (elem.mozCancelFullScreen) {   elemd.mozCancelFullScreen();  } else if (elem.cancelFullScreen) {   elem.cancelFullScreen();  } else if (elem.exitFullscreen) {   elem.exitFullscreen();  } else {   //浏览器不支持全屏API或已被禁用  };  /*   退出全屏后样式还原   */  elemd.style.height = '500px';  elemd.style.width = '700px' }

<div id="cont" STYLE="width: 500px;height: 300px;background-color: aliceblue;margin: auto"> <button id="btn">全屏&退出</button></div>

 .full{   position: fixed;   align-content: center;   /*top: 10px;*/   /*left: 10px;*/   /*    原来基础的百分百   */   width: 100%;   height: 100%;   overflow: auto;  }

(function ($) { // Adding a new test to the jQuery support object $.support.fullscreen = supportFullScreen(); // Creating the plugin $.fn.fullScreen = function (props) {  if (!$.support.fullscreen || this.length != 1) {   // The plugin can be called only   // on one element at a time   return this;  }  if (fullScreenStatus()) {   // if we are already in fullscreen, exit   cancelFullScreen();   return this;  }  // You can potentially pas two arguments a color  // for the background and a callback function  var options = $.extend({   'background': '#111',   'callback': function () {}  }, props);  // This temporary div is the element that is  // actually going to be enlarged in full screen  var fs = $('<div>', {   'css': {    'overflow-y': 'auto',    'background': options.background,    'width': '100%',    'height': '100%',    'align': 'center'   }  });  var elem = this;  // You can use the .fullScreen class to  // apply styling to your element  elem.addClass('fullScreen');  // Inserting our element in the temporary  // div, after which we zoom it in fullscreen  fs.insertBefore(elem);  fs.append(elem);  requestFullScreen(fs.get(0));  fs.click(function (e) {   if (e.target == this) {    // If the black bar was clicked    cancelFullScreen();   }  });  elem.cancel = function () {   cancelFullScreen();   return elem;  };  onFullScreenEvent(function (fullScreen) {   if (!fullScreen) {    // We have exited full screen.    // Remove the class and destroy    // the temporary div    elem.removeClass('fullScreen').insertBefore(fs);    fs.remove();   }   // Calling the user supplied callback   options.callback(fullScreen);  });  return elem; }; // These helper functions available only to our plugin scope. function supportFullScreen() {  var doc = document.documentElement;  return ('requestFullscreen' in doc) ||   ('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) ||   ('webkitRequestFullScreen' in doc); } function requestFullScreen(elem) {  if (elem.requestFullscreen) {   elem.requestFullscreen();  } else if (elem.mozRequestFullScreen) {   elem.mozRequestFullScreen();  } else if (elem.webkitRequestFullScreen) {   elem.webkitRequestFullScreen();  } } function fullScreenStatus() {  return document.fullscreen ||   document.mozFullScreen ||   document.webkitIsFullScreen; } function cancelFullScreen() {  if (document.exitFullscreen) {   document.exitFullscreen();  } else if (document.mozCancelFullScreen) {   document.mozCancelFullScreen();  } else if (document.webkitCancelFullScreen) {   document.webkitCancelFullScreen();  } } function onFullScreenEvent(callback) {  $(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function () {   // The full screen status is automatically   // passed to our callback as an argument.   callback(fullScreenStatus());  }); }})(jQuery);

 $(function () {  $("#btn").click(function () {   $("#cont").fullScreen();  }) });