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 Array.remove() 数组删除
Aug 06 Javascript
javascript function调用时的参数检测常用办法
Feb 26 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
JavaScript定义类的几种方式总结
Jan 06 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
小程序云开发之用户注册登录
May 18 Javascript
js实现旋转的星空效果
Nov 01 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
Zend公司全球首推PHP认证
2006/10/09 PHP
浅谈PHP语法(1)
2006/10/09 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
js技巧--转义符"\"的妙用
2007/01/09 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
小程序云开发实战小结
2018/10/25 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
在Python中增加和插入元素的示例
2018/11/01 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
24式加速你的Python(小结)
2019/06/13 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
成立公司计划书
2014/05/07 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
小学生成绩单评语
2014/12/31 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记