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下利用fso判断文件是否存在的代码
Dec 11 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
深入浅析React中diff算法
May 19 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 header()函数常用方法总结
2014/04/11 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
ECMAScript6--解构
2017/03/30 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
使用npy转image图像并保存的实例
2020/07/01 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
英国儿童图书网站:Scholastic
2017/03/26 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
什么是类的返射机制
2016/02/06 面试题
毕业生的自我鉴定
2013/10/29 职场文书
教师推荐信范文
2013/11/24 职场文书
教师党员整改措施
2014/10/24 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
python使用pymysql模块操作MySQL
2021/06/16 Python