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 相关文章推荐
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 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学习笔记之三 数据库基本操作
2011/01/17 PHP
php绘制一个矩形的方法
2015/01/24 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
Symfony的安装和配置方法
2016/03/17 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
原生js实现放大镜
2017/02/20 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
python 正则式使用心得
2009/05/07 Python
Python读写文件基础知识点
2019/06/10 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
Python实现图片识别加翻译功能
2019/12/26 Python
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
售后主管岗位职责
2013/12/08 职场文书
明星员工获奖感言
2014/08/14 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
储备店长岗位职责
2015/04/14 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python