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 相关文章推荐
5 cool javascript apps
Mar 24 Javascript
JavaScript网页制作特殊效果用随机数
May 22 Javascript
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
jquery last-child 列表最后一项的样式
Jan 22 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 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 得到根目录的 __FILE__ 常量
2008/07/23 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
Angular8基础应用之表单及其验证
2019/08/11 Javascript
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
简单的通用表达式求10乘阶示例
2014/03/03 Python
python实现端口转发器的方法
2015/03/13 Python
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
带你认识Django
2019/01/15 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
Python中遍历列表的方法总结
2019/06/27 Python
python交易记录整合交易类详解
2019/07/03 Python
Django之PopUp的具体实现方法
2019/08/31 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
绿色学校实施方案
2014/03/31 职场文书
爱情寄语大全
2014/04/09 职场文书
2014年会策划方案
2014/05/11 职场文书
社区矫正工作方案
2014/06/04 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang