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 CSS修改学习第二章 样式
Feb 19 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
vue2过滤器模糊查询方法
Sep 16 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
node实现mock-plugin中间件的方法
Dec 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通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
php异常处理使用示例
2014/02/25 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
php处理带有中文URL的方法
2016/07/11 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
React diff算法的实现示例
2018/04/20 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
python实现计算倒数的方法
2015/07/11 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
Python的语言类型(详解)
2017/06/24 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
python自动生成证件号的方法示例
2021/01/14 Python
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
党员实事承诺书
2014/03/26 职场文书
老公爱的承诺书
2014/03/31 职场文书
大学生新学期计划书
2014/04/28 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
同学聚会通知短信
2015/04/20 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL