js实现窗口全屏示例详解

前言

该 demo 包含全屏事件、退出全屏事件以及屏幕状态改变的钩子函数的封装
以下是一个完整示例,只需整体拷贝下来运行即可(注意引入了 jquery)

请在这里查看示例☞ fullscreen示例

示例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>demo</title>
 <script src="js/jquery-1.11.3.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  /* 窗口全屏样式 */
  html:-moz-full-screen {
   background: grey;
  }
  html:-webkit-full-screen {
   background: grey;
  }
  html:fullscreen {
   background: grey;
  }

  div {
   width: 100px;
   height: 100px;
   background: blue;
  }
  img {
   width: 80px;
   height: 80px;
  }
 </style>
</head>
<body>
 <button class="win-fullscreen">窗口全屏</button>
 <button class="div-fullscreen">div全屏</button>
 <button class="img-fullscreen">img全屏</button>
 <button class="exit-fullscreen">退出全屏</button>
 <div class="div">
  <img class="img" src="images/a.png">
 </div>
</body>
<script>
 /* 调用示例 */
 // 窗口全屏
 $('.win-fullscreen').on('click', function() {
  requestFullScreen(document.documentElement);
 });

 // div全屏
 $('.div-fullscreen').on('click', function() {
  requestFullScreen($('.div')[0]);
 });

 // img全屏
 $('.img-fullscreen').on('click', function() {
  requestFullScreen($('.img')[0]);
 });

 // 退出全屏
 $('.exit-fullscreen').on('click', function() {
  exitFull();
 });

 // 窗口状态改变事件
 fullscreenchange(document, function(isFull) {
  console.log(isFull);
 });

 /* 封装 */
 // 窗口状态改变
 function fullscreenchange(el, callback) {
  el.addEventListener("fullscreenchange", function () {
   callback && callback(document.fullscreen);
  });
  el.addEventListener("webkitfullscreenchange", function () {
   callback && callback(document.webkitIsFullScreen);
  });
  el.addEventListener("mozfullscreenchange", function () {
   callback && callback(document.mozFullScreen);
  });
  el.addEventListener("msfullscreenchange", function () {
   callback && callback(document.msFullscreenElement);
  });
 }

 // 全屏
 function requestFullScreen(element) {
  var requestMethod = element.requestFullScreen || //W3C
  element.webkitRequestFullScreen || //Chrome等
  element.mozRequestFullScreen || //FireFox
  element.msRequestFullScreen; //IE11
  if (requestMethod) {
   requestMethod.call(element);
  }else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
   var wscript = new ActiveXObject("WScript.Shell");
   if (wscript !== null) {
    wscript.SendKeys("{F11}");
   }
  }
 }

 //退出全屏
 function exitFull() {
  var exitMethod = document.exitFullscreen || //W3C
  document.mozCancelFullScreen || //Chrome等
  document.webkitExitFullscreen || //FireFox
  document.webkitExitFullscreen; //IE11
  if (exitMethod) {
   exitMethod.call(document);
  }else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
   var wscript = new ActiveXObject("WScript.Shell");
   if (wscript !== null) {
    wscript.SendKeys("{F11}");
   }
  }
 }
</script>
</html>

参考文章

用html5 js实现点击一个按钮达到浏览器全屏效果

Native Fullscreen JavaScript API (plus jQuery plugin)

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

(0)

相关推荐

  • js控制页面的全屏展示和退出全屏显示的方法

    本文实例讲述了js控制页面的全屏展示和退出全屏显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>    <html>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <body>    <div style="margin:0 auto;heig

  • 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; backgr

  • JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

    本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操作指定的内容,例如可以弹出一个登陆框之类的内容,下面就介绍一下如何实现此种效果,代码实例如下: 复制代码 代码如下: <!DOCTYPE html>    <html>    <head>    <meta charset=" utf-8">

  • Js浏览器全屏代码(模仿按F11)

    test function Fkey(){ var WsShell = new ActiveXObject('WScript.Shell') WsShell.SendKeys('{F11}'); } 屏幕切换 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 用html5 js实现点击一个按钮达到浏览器全屏效果

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持 全屏 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen()

  • js模拟F11页面全屏显示

    本文实例为大家分享了js模拟F11页面全屏显示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试全屏</title> </head> <body> <button id='btn'>全屏按钮</button> <

  • js实现简单页面全屏

    本文实例为大家分享了js实现简单页面全屏,供大家参考,具体内容如下 全屏效果为传入div元素全屏: 代码块 <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body> <div style="margin:0 auto;height:600px;width:700px;"> <butto

  • JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件

    HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScreen() 作用:请求某个元素element全屏 Document.getElementById("myCanvas").requestFullScreen() 这里是将其中的元素ID去请求fullscreen 退出全屏 document.cancelFullScreen() Document

  • js全屏事件fullscreenchange 实现全屏、退出全屏操作

    本文实例为大家分享了js全屏事件fullscreenchange,实现全屏.退出全屏操作,供大家参考,具体内容如下 1.进入全屏 function launchFullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen() } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen() } else if (el

  • js全屏显示显示代码的三种方法

    第一种:       在已经打开的一个普通网页上,点击"全屏显示",然后进入该网页对应的全屏模式.方法为:在网页的<body>与</body>之间加入以下代码: 复制代码 代码如下: <form><input type="BUTTON" name="FullScreen" value="全屏显示" onClick="window.open(document.location,

随机推荐