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获得选中文本内容的方法
Dec 02 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 Javascript
深入理解Vue的数据响应式
May 15 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文本数据库的搜索方法
2006/10/09 PHP
PHP 已经成熟
2006/12/04 PHP
测试您的 PHP 水平的题目
2007/05/30 PHP
在php和MySql中计算时间差的方法
2011/04/22 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
javascript 写类方式之九
2009/07/05 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
深入理解node.js http模块
2018/01/24 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
跟老齐学Python之用Python计算
2014/09/12 Python
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
python re模块findall()函数实例解析
2018/01/19 Python
python如何生成网页验证码
2018/07/28 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
学生个人自我鉴定范文
2014/03/28 职场文书
Nginx反向代理学习实例教程
2021/10/24 Servers