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学习笔记8 用JSON做原型
Jan 11 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
vue-router的两种模式的区别
May 30 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 XML操作的各种方法解析(比较详细)
2010/06/17 PHP
destoon之一键登录设置
2014/06/21 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
js常用函数 不错
2006/09/08 Javascript
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
在Python中使用列表生成式的教程
2015/04/27 Python
Python中使用partial改变方法默认参数实例
2015/04/28 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
关于青春的演讲稿
2014/05/05 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
运动员代表致辞
2015/07/29 职场文书
会计做账心得体会
2016/01/22 职场文书