JS实现全屏的四种写法

更新时间：2016年12月30日 13:56:06 作者：BaymaxLily

这篇文章主要为大家详细介绍了JS或jquery实现全屏的四种写法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

您可能感兴趣的文章:

JS
全屏

js模仿java的Map集合详解
这篇文章主要介绍了js模仿java的Map集合的相关资料，Java中某些最常用的集合类是List和Map，感兴趣的小伙伴们可以了解一下
2016-01-01
element ui - el-button 重新渲染后disabled属性失效问题解决
这篇文章主要介绍了elementui el-button重新渲染后disabled属性失效问题解决,解决方法也很简单，给el-button元素添加key值就可以了，需要的朋友可以参考下
2023-07-07
纯js实现页面返回顶部的动画(超简单)
下面小编就为大家带来一篇纯js实现页面返回顶部的动画(超简单)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
元素未显示设置width/height时IE中使用currentStyle获取为auto
元素未显示设置width/height时IE中无法使用currentStyle获取，默认获取值为auto,需要的朋友可以参考下
2014-05-05
Bootstrap Tooltip显示换行和左对齐的解决方案
小编在使用Bootstrap的Tooltip功能时遇到一些小问题，换行丢失，文字不是左对齐。下面小编给大家介绍下Bootstrap Tooltip显示换行和左对齐的解决方案，感兴趣的朋友一起看看吧
2017-10-10
一文秒懂JavaScript DOM操作基础
通过这篇文章帮助大家快速学习JavaScript DOM操作基础的相关知识，本文给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧
2021-04-04
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
JS只是一门支持面向对象编程的语言，通过OO可以让我们的代码组织更加人性化。可是与传统基与类的面向对编程语言不同它没有类概念并且没成员访问修饰符。这多少会给我们编程工作会带来一些束缚
2011-12-12
json格式的时间显示为正常年月日的方法
json格式的时间显示为：Date(1377828670436)需要转换为正常年月日，具体的实现思路及代码如下，感兴趣的朋友可以参考下
2013-09-09
javascript系统时间设置操作示例
这篇文章主要介绍了javascript系统时间设置操作,涉及javascript时间运算与判断相关操作技巧,需要的朋友可以参考下
2019-06-06
js学习总结_轮播图之渐隐渐现版(实例讲解)
下面小编就为大家带来一篇js学习总结_轮播图之渐隐渐现版(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07

JS实现全屏的四种写法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具