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+mapbar实现地图定位
Apr 09 Javascript
jquery之empty()与remove()区别说明
Sep 10 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
vue之a-table中实现清空选中的数据
Nov 07 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 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单态模式简单用法示例
2016/11/16 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
使用Python抓取模板之家的CSS模板
2015/03/16 Python
python中zip和unzip数据的方法
2015/05/27 Python
Python虚拟环境项目实例
2017/11/20 Python
Python实现的选择排序算法示例
2017/11/29 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
金融事务专业毕业生求职信
2014/02/23 职场文书
毕业自我鉴定书
2014/03/24 职场文书
大型演出策划方案
2014/05/28 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
批评与自我批评范文
2014/10/15 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers