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打印指定区域Html页面并自动分页
Jul 04 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
vue之数据交互实例代码
Jun 16 Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
浅谈python中的变量默认是什么类型
2016/09/11 Python
Python测试人员需要掌握的知识
2018/02/08 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
网页设计个人找工作求职信
2013/11/28 职场文书
酒店中秋节促销方案
2014/01/30 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
优秀大学生申请书
2019/06/24 职场文书
Web应用开发TypeScript使用详解
2022/05/25 Javascript
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers