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 相关文章推荐
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
javascript中 try catch用法
Aug 16 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
React配置子路由的实现
Jun 03 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中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
英语专业个人求职自荐信
2013/09/21 职场文书
家长对小学生的评语
2014/01/28 职场文书
初三政治教学反思
2014/01/30 职场文书
五心教育心得体会
2014/09/04 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
2014年教研员工作总结
2014/12/23 职场文书
电气工程师岗位职责
2015/02/12 职场文书
雷锋观后感
2015/06/10 职场文书
环保建议书作文300字
2015/09/14 职场文书
在Python 中将类对象序列化为JSON
2022/04/06 Python
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python