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 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 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面向对象编程快速入门
2006/12/14 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
php中rename函数用法分析
2014/11/15 PHP
ThinkPHP路由详解
2015/07/27 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
Python 命令行非阻塞输入的小例子
2013/09/27 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
python如何读取bin文件并下发串口
2019/07/05 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
农民入党思想汇报
2014/01/03 职场文书
党员组织关系介绍信
2014/02/13 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
国防教育标语
2014/10/08 职场文书
稽核岗位职责范本
2015/04/13 职场文书
社区节水倡议书
2015/04/29 职场文书
离职信范文
2015/06/23 职场文书
高三教师工作总结2015
2015/07/21 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
浅谈pytorch中的dropout的概率p
2021/05/27 Python