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设置按钮的disabled属性的实现代码
Nov 28 Javascript
AngularJS基础知识
Dec 21 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
Vue.js快速入门教程
Sep 07 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 Javascript
vue+echarts实现多条折线图
Mar 21 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
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
js中hash和ico的关联分析
2015/02/05 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
TensorFlow实现模型评估
2018/09/07 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
python爬取招聘要求等信息实例
2020/11/20 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
校园自助餐厅的创业计划书
2013/12/26 职场文书
大专会计自我鉴定
2014/02/06 职场文书
护士毕业生自荐信
2014/02/07 职场文书
优秀学生评语大全
2014/04/25 职场文书
个人收入证明模板
2014/09/18 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书