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写法二

.html

<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>

.js

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

JS写法三

.html

<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>

.js

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'

 }

jQuery写法四

.html

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

.css

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

fullScreen.js

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

myJS.js

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。