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中根据字数截取字符串,不能截断url
Jan 12 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
javascript的内存管理详解
Aug 07 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
微信小程序签到功能
Oct 31 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
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
golang与PHP输出excel示例
2016/07/22 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
简析Python的闭包和装饰器
2016/02/26 Python
《Python学习手册》学习总结
2018/01/17 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
Python龙贝格法求积分实例
2020/02/29 Python
pandas数据拼接的实现示例
2020/04/16 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
详细分析Python collections工具库
2020/07/16 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
什么是Rollback Segment
2013/04/22 面试题
普通党员个人整改措施
2014/10/27 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技