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