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 相关文章推荐
JavaScript URL参数读取改进版
Jan 16 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
uniapp开发小程序的经验总结
Apr 08 Javascript
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
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 ZipArchive压缩函数详解实例
2013/11/06 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
Python中运行并行任务技巧
2015/02/26 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
Django URL传递参数的方法总结
2016/08/28 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
python 写一个性能测试工具(一)
2020/10/24 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
村委会主任先进事迹
2014/01/15 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
国培远程培训感言
2014/03/08 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
MySQL创建定时任务
2022/01/22 MySQL