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 相关文章推荐
jQuery 常见开发使用技巧总结
Dec 26 Javascript
监控 url fragment变化的js代码
Apr 19 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
php 修改密码实现代码
May 24 Javascript
深入理解Promise.all
Aug 08 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 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 isset()与empty()的使用区别详解
2010/08/29 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
告诉大家什么是JSON
2008/06/10 Javascript
JS 控制CSS样式表
2009/08/20 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
Javascript的表单与验证-非空验证
2016/03/18 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
Python map和reduce函数用法示例
2015/02/26 Python
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
python基于opencv检测程序运行效率
2019/12/28 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
Python 随机按键模拟2小时
2020/12/30 Python
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
游戏商店:Eneba
2020/04/25 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
分公司经理任命书
2014/06/05 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
债务纠纷代理词
2015/05/25 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript