JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍


Posted in Javascript onApril 03, 2014

// 判断各种浏览器,找到正确的方法
function launchFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}
// 启动全屏!
launchFullScreen(document.documentElement); // 整个网页
launchFullScreen(document.getElementById("videoElement")); // 某个页面元素

对你想要全屏显示的页面元素调用全屏方法,浏览器窗口就会变成全屏,但会先请求用户允许全屏模式。要注意,用户很有可能会拒绝全屏模式。如果用户运行全屏模式,则浏览器的工具条等按钮菜单都会隐藏,你的页面会覆盖整个屏幕。

退出全屏模式

这个exitFullscreen方法(也需要加浏览器前缀)会让浏览器退出全屏模式,变成正常模式。

// 判断浏览器种类
function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}
// 退出全屏模式!
exitFullscreen();

需要注意的是,exitFullscreen只能由document对象调用,而不是启动全屏时传入的对象。

全屏属性和事件

不幸的是,全屏属性和事件的相关方法也需要添加浏览器前缀,但我相信很快就不需要这样做了。

1.document.fullScreenElement: 全屏显示的网页元素。
2.document.fullScreenEnabled: 判断当前是否处于全屏状态。

fullscreenchange事件会在启动全屏或退出全屏时触发:

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

你仍然可以使用上面判断浏览器种类的方法给这个事件加上前缀。

全屏样式CSS

各种浏览器都提供了一个非常有用的全屏模式时的css样式规则:

:-webkit-full-screen {
  /* properties */
}
:-moz-full-screen {
  /* properties */
}
:-ms-fullscreen {
  /* properties */
}
:full-screen { /*pre-spec */
  /* properties */
}
:fullscreen { /* spec */
  /* properties */
}
/* deeper elements */
:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}
/* styling the backdrop*/
::backdrop {
  /* properties */
}
::-ms-backdrop {
  /* properties */
}

有些情况下,WebKit样式会出现一些问题,你最好把这些样式保持简洁。

这些全屏API都超级的简单,而且超级的有用。我第一次是在MDN's BananaBread demo中看到这个API的,那是一个枪击游戏,正好需要全屏化,它使用了事件监听来检测全屏状态。记住这些好用的API,需要的时候可以顺手拈来。

Javascript 相关文章推荐
实现连缀调用的map方法(prototype)
Aug 05 Javascript
JavaScript 滚轮事件使用说明
Mar 07 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
javascript实现简易计算器
Feb 01 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
vue路由缓存的几种实现方式小结
Feb 02 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
使用jQuery动态加载js脚本文件的方法
Apr 03 #Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 #Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 #Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 #Javascript
javascript实现des解密加密全过程
Apr 03 #Javascript
无刷新预览所选择的图片示例代码
Apr 02 #Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 #Javascript
You might like
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
深入Nginx + PHP 缓存详解
2013/07/11 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
python的re模块使用方法详解
2019/07/26 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
Python处理session的方法整理
2019/08/29 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
Java语言的优势
2015/01/10 面试题
临床医学专业个人的自我评价
2013/09/27 职场文书
社会学专业求职信
2014/02/24 职场文书
教师校本培训方案
2014/02/26 职场文书
高中生操行评语大全
2014/04/25 职场文书
企业指导教师评语
2014/04/28 职场文书
教师一帮一活动总结
2014/07/08 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书