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 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
css配合jquery美化 select
Nov 29 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 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 组件化编程技巧
2009/06/06 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
JSON取值前判断
2014/12/23 Javascript
js中this用法实例详解
2015/05/05 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
python 获取et和excel的版本号
2009/04/09 Python
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
Sublime开发python程序的示例代码
2018/01/24 Python
python实现树形打印目录结构
2018/03/29 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
新闻专业个人自我评价
2013/09/21 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
留学经费担保书
2014/05/12 职场文书
绵山导游词
2015/02/05 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
Python 内置函数速查表一览
2021/06/02 Python