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 相关文章推荐
Javascript 读后台cookie代码
Sep 15 Javascript
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
Javascript自定义事件详解
Jan 13 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
微信小程序地图实现展示线路
Jul 29 Javascript
使用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
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
Vue+Vux项目实践完整代码
2017/11/30 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
Python中字符串的常见操作技巧总结
2016/07/28 Python
python使用turtle库绘制树
2018/06/25 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
简单的Python人脸识别系统
2020/07/14 Python
如何将json数据转换为python数据
2020/09/04 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
实习护理工作自我评价
2013/09/25 职场文书
经营理念标语
2014/06/21 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
2015年司法所工作总结
2015/04/27 职场文书
三方合作意向书范本
2015/05/09 职场文书
节约用水广告语60条
2019/11/14 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏