js实现窗口全屏示例详解


Posted in Javascript onSeptember 17, 2019

前言

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

参考文章

Native Fullscreen JavaScript API (plus jQuery plugin)

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

Javascript 相关文章推荐
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
js前端导出Excel的方法
Nov 01 Javascript
js实现简单页面全屏
Sep 17 #Javascript
js模拟F11页面全屏显示
Sep 17 #Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 #Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 #Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 #Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 #Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 #Javascript
You might like
如何在PHP中使用Oracle数据库(3)
2006/10/09 PHP
利用PHP和AJAX创建RSS聚合器的代码
2007/03/13 PHP
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
php不写闭合标签的好处
2014/03/04 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
浅析Python中的序列化存储的方法
2015/04/28 Python
python在非root权限下的安装方法
2018/01/23 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
Python JSON编解码方式原理详解
2020/01/20 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
互动出版网:专业书籍
2017/03/21 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
政府信息公开实施方案
2014/05/09 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
公务员个人考察材料
2014/12/23 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python