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绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
requireJS使用指南
Apr 27 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
使用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
ASP和PHP都是可以删除自身的
2007/04/09 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
JavaScript 全角转半角部分
2009/10/28 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
Python中optparser库用法实例详解
2018/01/26 Python
python实现windows下文件备份脚本
2018/05/27 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
python实现猜拳游戏
2020/03/04 Python
python实现猜拳游戏项目
2020/11/30 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
什么是GWT的Module
2013/01/20 面试题
升职自荐信
2013/11/28 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
请假条怎么写
2014/04/10 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
队列队形口号
2015/12/25 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js