Fullscreen API 全屏显示网页
这个 API 不仅能够使整个页面全屏显示,也可以使页面中的某个元素全屏显示。它的设计初衷是为了全屏显示 HTML5 视频和游戏,以便更全面的替代 flash 功能。尽管还有很多有待完善的地方,但是作为一个新的浏览器特性,在某些地方还是能够极大地增强用户体验。
1. 标准调用方式
要对某个元素使用全屏特效,标准的流程是:
- 调用这个元素对象的
requestFullscreen()
方法; - 浏览器将元素全屏显示,改变相关的属性值,然后触发 document 的
fullscreenchange
事件; - 退出全屏时有两种方式,一种是默认的按
ESC
键退出,一种是调用 document 的exitFullscreen()
方法; - 浏览器将元素退出全屏显示,改变相关属性值,再次触发
fullscreenchange
方法。
浏览器在改变全屏状态时修改的相关属性,是指修改当前全屏状态有否、全屏显示的元素对象,这些属性都是只读的。
浏览器触发 fullscreenchange
事件,默认不做任何处理,内部的处理函数需要编程人员自行判断当前全屏状态后,进行相应处理。
对应的,规范中还添加了一个 :fullscreen
伪类,对当前全屏的元素进行样式定义。
2. 封装API
Fullscreen 目前只有两个方法:进入全屏、退出全屏,三个属性(全部是只读的):是否支持全屏、当前全屏状态、当前全屏元素,以及一个在全屏状态改变时触发的事件( Using full-screen mode 中提到还有一个 fullscreenerror
,但是我没有测试出如何才能触发这个事件 )。与 W3 草案 相比,FireFox 的实现更符合标准,而 webkit 内核浏览器中的方法则要自我很多。
所有的方法和属性中,只有 requestFullscreen()
是 element 对象的方法,其他全部是 document 对象所有的方法和属性。
2.1 进入全屏:element.requestFullscreen()
将 element 全屏显示。webkit内核浏览器和Firefox表现不同,前者只要求element是DOM元素即可,后者则要求DOM必须是文档流中的元素,比较严格,否则不能全屏显示。
出于安全考虑,全屏状态下默认是不允许用户输入的。webkit 内核浏览器会阻止除方向键、控制键之外的键盘输入,FireFox 会在输入时发出要求用户退出全屏状态的提示。前者可以通过在方法 webkitRequestFullScreen()
中传入参数 Element.LLOW_KEYBOARD_INPUT
允许用户输入,但 Safari 一旦传入该参数,整个 Fullscreen 功能都会坏掉(这应该是 Safari 的一个bug);后者直接就可以输入,除了有个烦人的提示。
webkit 浏览器中可以通过只读属性 document.webkitFullScreenKeyboardInputAllowed
查看当前是否允许全屏状态下的输入。
/**
* 标准化 requestFullscreen 方法
* @param {DOM} elem 要全屏显示的元素(webkit下只要是DOM即可,Firefox下必须是文档中的DOM元素)
*/
function requestFullscreen( elem ) {if (elem.requestFullscreen) {elem.requestFullscreen();}else if (elem.webkitRequestFullScreen) {// 对 Chrome 特殊处理,// 参数 Element.ALLOW_KEYBOARD_INPUT 使全屏状态中可以键盘输入。if ( window.navigator.userAgent.toUpperCase().indexOf( 'CHROME' ) >= 0 ) {elem.webkitRequestFullScreen( Element.ALLOW_KEYBOARD_INPUT );}// Safari 浏览器中,如果方法内有参数,则 Fullscreen 功能不可用。else {elem.webkitRequestFullScreen();}}else if (elem.mozRequestFullScreen) {elem.mozRequestFullScreen();}
}
2.2 退出全屏:document.exitFullscreen()
从全屏状态中退出。目前实现的方法都是 cancelFullScreen()
,而不是标准的 exitFullscreen()
。
/**
* 标准化 exitFullscreen 方法
*/
function exitFullscreen() {if (document.exitFullscreen) {document.exitFullscreen();}else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen();}else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();}
}
2.3 浏览器是否支持全屏:document.fullscreenEnabled
通过该属性的boolean值判断浏览器是支持 Fullscreen 功能。
webkit 内核的浏览器目前还没有该属性,因此只能通过能力判定来判断是否支持全屏显示功能。Firefox 已经有了对应的属性定义。
/* 标准化 fullscreenEnabled 属性 (只读) */
document.fullscreenEnabled = ( function() {var doc = document.documentElement;return ( 'requestFullscreen' in doc ) ||( 'webkitRequestFullScreen' in doc ) ||// 对Firefox除了能力判断,还加上了属性判断( 'mozRequestFullScreen' in doc && document.mozFullScreenEnabled ) ||false;} )();
2.4 :document.fullscreenElement
当前全屏显示的DOM元素。
/**
* 标准化 fullscreenElement 属性 (只读)
* 以同名方法替代
*/
function fullscreenElement() {return document.fullscreenElement ||document.webkitCurrentFullScreenElement ||document.mozFullScreenElement ||null;
}
2.5 当前全屏状态:document.fullscreen
该属性并未在2012/6/3的 W3草案 中出现,但在 Using full-screen mode 一文中介绍了该属性。其值为 boolean 类型,判断当前文档的全屏状态。
如果最终去掉这个判断全屏状态的属性,我们仍然可以通过 document.fullscreenElement
的值是否为 null 来判断全屏与否
/**
* 标准化 fullscreen 属性 (只读)
* 以同名方法替代
*/
function fullscreen() {return document.fullscreen ||document.webkitIsFullScreen ||document.mozFullScreen ||false;
}
2.6 全屏状态改变事件:fullscreenchange
该事件要绑定在 document 上,该事件仅在全屏状态改变时触发,默认没有任何动作。
/* 绑定 document 的 fullscreenchange 事件 */
document.addEventListener('fullscreenchange', // webkitfullscreenchange/mozfullscreenchangefunction( evt ){//todo 全屏状态改变时的时间处理。//默认不会有任何处理,需要自己判断当前屏幕全屏与否,做出相应处理。},false
);/* 如果使用 jQuery : */
$( document ).bind('fullscreenchange webkitfullscreenchange mozfullscreenchange',function(){//todo code}
);
3. 全屏样式设置
标准中,通过 :fullscreen
伪类对全屏的元素进行样式定义。
默认情况下,浏览器只会简单地将元素设置为全屏显示。如果该元素全屏后,高度比屏幕还高,超出的部分将会被隐藏。为了将超出部分可以滚动显示,最顶层全屏显示的元素要特别设置:
position : fixed;
top : 0;
left : 0;
width : 100%;
height : 100%;
overflow : auto;
一般情况下,要全屏显示的元素是不能像上面这样设置的。那么我们可以变通下,设置一个 <div/>
,包围要全屏的元素,然后将这个 <div/>
设置为全屏,上面的样式定义就可以定义在这个 <div/>
上,相应的,:fullscreen
将会作用在这个 <div/>
上。这样,过长的元素就可以在这个包围层内滚动显示。
4. 特别注意
- 目前 FireFox 10、Safari 5.1+、Chrome 15+ 支持全屏
- 可以使任意元素全屏显示,不只是整个页面
- 全屏只能从事件触发(用户操作),而不能用代码直接触发
- 全屏状态下,webkit 内核浏览器默认会阻止除方向键、控制键之外的键盘输入,FireFox 会在输入时发出退出全屏状态提示。处理方法在 封装API部分有说明。
下面是实际中遇到的需要注意的地方:
- 全屏状态切换需要时间。执行
requestFullscreen()
后,并不会立即进入全屏状态,对应的全屏属性不会立即更改,而是有一个执行时间。因此,只能在fullscreenchange
事件触发后才代表进入了全屏状态。但是在fullscreenchange
事件中调用$(window).width()
并不总能得到全屏的尺寸,这个现象很奇怪。如果需要屏幕尺寸,可以通过window.screen.width
来获得。 - 涉及修改DOM文档须注意代码位置。当用
<div/>
包围要全屏显示的元素时,这段 javascript 代码不应该在要全屏显示的元素内部,否则这段代码会被执行两遍,而且第二遍不会在断点中被监视到,原因将在后文详细描述。 ESC
键不同系统功能不同。目前发现点击ESC
退出全屏时,mac系统不会再额外触发键盘事件,但是win7系统下出发fullscreenchange
事件后还会立马触发键盘事件,因此如果还有不希望被触发的键盘事件,可以设置一个监视变量,在很短时间后再修改监视变量,以错过这个立马执行的时间。
5. 未涉及功能
- iframe 元素的
allowfullscreen
属性 - ::backdrop 伪类
- 具体其他细节可以参考 W3 草案
6. 结语
Fullscreen API 毕竟目前只是草案,尚未形成正式的标准,况且各个浏览器的实现情况也不完全相同,甚至细节上的实现差别更可能引发预想不到的问题。但作为渐进增强方式使用的新功能,能够极大的增强用户体验。仍要根据规范的完善,不断改进我们的代码。
详细代码可以参考:https://github.com/calefy/calefy.github.com/blob/master/js/Fullscreen.js
参考
- W3 草案 2012/6/3版
- Using full-screen mode
- Enhance Your Website with the FullScreen API
- Using the Fullscreen API in web browsers
- 代码参考 jQuery Fullscreen 插件
Fullscreen API 全屏显示网页相关推荐
- VB.NET在WinForm中嵌入谷歌浏览器_制作全屏显示网页程序_并读取INI配置文件_根据配置文件显示不同的网页---VB.NET工作笔记016
我们做了个项目,科技馆的,需要把绚丽的网页,全屏放到浏览器上显示,但是....他们做的这个网页...我去,只支持谷歌这样的浏览器,在IE这样的浏览器模式下,显示有问题... 不知道是不是因为,没有使用 ...
- JSP网页全屏显示、退出全屏、关闭页面
[转]JSP网页全屏显示.退出全屏.关闭页面 jsp相关知识 2009-06-07 20:36:42 阅读108 评论0 字号:大中小 订阅 全屏显示 ---------------------- ...
- 【温故而知新-Javascript】窗口效果 (全屏显示窗口、定时关闭窗口)
1.全屏显示窗口 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- js 全屏显示和关闭页面
js使ie全屏显示(转) 文章分类:Web前端 第一种: 在已经打开的一个普通网页上,点击"全屏显示",然后进入该网页对应的全屏模式.方法为:在网页的<body>与&l ...
- 前端学习(2641):懂代码之header表头页之控制全屏显示
<!-- 全屏显示 控制全屏显示第一步 --><div class="btn-fullscreen" @click="handleFullScreen& ...
- 第89天:HTML5中 访问历史、全屏和网页存储API
一.访问历史 API 通过history对象实现前进.后退和刷新之类的操作 history新增的两个方法history.replaceState()和history.pushState()方法属于HT ...
- 将网页全屏显示的三种方法
1.最简单,最直接的方法,使用window.open()函数 var url = "http://www.baidu.com" ; window.open(url,'_blank' ...
- 网页全屏显示以及退出全屏,包括单个元素全屏显示
在一些场景中我们希望网页能够全屏显示,这样可展示的区域更大,也就是隐藏浏览器的地址栏和页签栏,上代码 为了方便调用直接进行了封装,同时也做了兼容性处理,(如果你觉得我代码写的垃圾让你不知道该怎么调,那 ...
- JS实现新打开网页最大化or全屏显示
2019独角兽企业重金招聘Python工程师标准>>> 一个新的小功能,用户希望打开的页面可以全屏显示~唔~不是实现F11那种效果,只是填满任务栏上方的屏幕~ <script ...
最新文章
- vs连接mysql建一个表并增删查改_VS连接SQL Server数据库,增删改查详细教程(C#代码)...
- linux shell mkdosfs 命令用于建立 dos 文件系统
- java finalize逃脱_JVM【第十三回】:【Java对象存活------finalize()方法】
- hadoop关联文件处理
- 人工智能TensorFlow工作笔记005---计算图的基本应用_认识计算图
- apache的日志切割
- Mac安装numpy
- java添加缓存_实现 Java 本地缓存的方法解析
- 为什么普通人做量化交易会亏钱?
- arm el2与el3_ARM下的EL/PL概念
- 三大框架整合开发的时候,出现红色双箭头,advised by org.springframework.transaction.interceptor.TransactionInterceptor.in
- 前端如何设置浏览器窗口的网站logo
- 基于单片机的条形码扫描系统设计
- 年总结(一):逝去的14年
- 颜体html标签,颜体楷书笔法32式详解,一定不能错过!(超级干货)
- 达梦物化视图概念及简单示例
- 从0开始搭建公司技术栈,yyds
- 支持Python3、JavaScript、Shell、TypeScript 的定时任务管理面板项目
- 如何提高自己的执行力
- Windows 2008R2 +MDT2013+WDS(1)
热门文章
- python 3.8 安装pyaudio失败的解决办法
- 《Adobe Premiere Pro视频编辑指南(第2版)》——高效的生产创意软件包
- 2020牛客暑期多校训练营(第九场) Groundhog Chasing Death
- 干货 | 携程容器偶发性超时问题案例分析(一)
- Windows服务器配置与管理动态磁盘技术 、建立基本卷、带区卷、跨区卷、镜像卷和RAID-5卷的方法 磁盘配额...
- WPF 防止程序多次打开运行
- mysql触发器if_Mysql 触发器
- 【LeetCode - 742】二叉树最近的叶节点
- 静态NAT、动态NAT和easy ip
- 生信科技爱好者祝大家元宵快乐!