HTML5 全屏特性
全屏功能是浏览器很早就支持的一项功能了,可以让你页面中的video, image ,div 等等子元素实现全屏浏览,从而带来更好的视觉体验,来看看怎么使用吧。先来看看有哪些API和事件支持。
API
// 元素请求全屏显示
element.requestFullscreen()
// 检测文档的当前状态是否允许执行全屏操作
document.fullscreenEnabled()
//当前显示的元素是否处于全屏状态,如果处于,则返回为非空对象,否则返回null
document.fullscreenElement()
//元素退出全屏显示
document.exitFullscreen()
上面除了RequestFullscreen()
是支持element
对象以外,其他3个都只是支持document
.
Event
fullscreenchange // 全屏状态更改时触发
fullscreenerror // 执行全屏错误时触发
由于每个浏览器实现的方式不一样,所以我们实际的调用中还不能直接这样写,需要针对不同的浏览器做支持检测,下面跟着详细的例子看下具体兼容代码。
html
<body>
<img id="imgFS" src=""/>
<a id="btnFS" href="javascript:;"> FullScreen </a>
</body>
javascript
var fullScreen = document.getElementById('btnFS');
fullScreen.addEventListener("click", function(){
var status = document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullscreenEnabled ||
document.msFullscrrenEnabled;
if (status) {
var img = document.getElementById("imgFS");
if (img.requestFullscreen) {
img.requestFullscreen();
} else if (img.msRequestFullscreen) { // IE
img.msRequestFUllscreen();
} else if (img.mozRequestFullscreen) { // Firefox (Gecko)
img.mozRequestFullscreen();
} else if (img.webkitRequestFullscreen) { // Webkit
img.webkitRequestFullscreen();
}
} else {
alert("The document not allowed to fullscreen.");
}
});
以上代码针对一个图片元素进行了全屏操作的例子,上文中的全屏触发是通过监听一个按钮来实现的,这个地方需要注意的是,假如你想在页面载入后就触发全屏,这个事件是不会触发执行全屏显示的。只有通过例如click, keydown
等触发事件,才可以启用全屏显示的功能。
监听键盘按钮触发
下面的代码示例通过按键F12来触发启用或者关闭的操作,主要是利用了element.fullscreenElement
方法来判断当前的文档状态,来进行切换的,具体代码如下:
document.addEventListener("keydown", function(e){
console.log(e.keyCode);
if (e.keyCode == 123) { // keypress fn + F12 for Mac
fullscreen();
}
});
function fullscreen() {
var body = document.body;
var status = !document.fullscreenElement && // get the screen status
!document.msFullscreenElement &&
!document.mozFullscreenElement &&
!document.webkitFullscreenElement;
if (status) {
if (body.requestFullscreen) {
body.requestFullscreen();
} else if (body.mozRequestFullscreen) {
body.mozRequestFullscreen();
} else if (body.webkitRequestFullscreen) {
body.webkitRequestFullscreen();
} else if (body.msRequestFullscreen) {
body.msRequestFUllscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozExitFullscreen) {
document.mozExitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
全屏样式
全屏效果下,可以启用针对该状态下的特定样式,从而达到更好的浏览效果。样式定义如下:
:-webkit-full-screen { // Webkit
}
:-moz-full-screen { // Gecko
}
:-ms-fullscreen { // IE
}
:fullscreen {
}
// 调用示例
#elementID :fullscreen {
width:100%;
height:100%;
}
:fullscreen::backdrop { // 背光
}
// 全屏背光,这是一个新的样式属性,但是目前浏览器支持的的都不太好, 在IE11中被支持,另外下面提到的Opera12.1,使用了:fullscreen-ancestor, 调用方法如下
:-ms-fullscreen::-ms-backdrop {
background-color: #000;
}
在这个地方需要注意的是,Gecko和Webkit在全屏状态下显示是有差异的,Gecko会默认把指定的全屏元素进行width:100%;height:100%
,而Webkit则是显示一片黑色,所以这个地方就需要针对全屏的元素进行样式调整了,参考以上代码示例。
浏览器兼容情况
参考地址:Caniuse
另外上面有说道下面几个问题,可以注意下。
- IE11全屏状态下是不允许滚动的
- IE11 并不允许通过
keydown or pointerdown
事件来触发msRequestFullscreen()
,keypress 和click
没有问题 - IE11对iframe中使用全屏支持的并不是很好
- 在全屏模式中Safari阻塞了keyboard事件(出于安全考虑),
但是我上面代码中,在Yosmite中,通过监听F12,Safari是可以正常工作的
- Opera 12.1 使用老的标准
:fullscreen-ancestor
伪类替代了::backdrop
伪元素
总结
总之全屏是一个非常棒的特性,它可以让我们的Web拥有像原生应用一样体验,在以后的项目中会多尝试下这个特性。
本文参考
Fullscreen API Living Standard
How to Use the HTML5 Full-Screen API (Again)
HTML5 全屏特性的更多相关文章
- HTML5全屏浏览器兼容方案
最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit Firefox IE Element.requestFullscreen() ...
- 基于HTML5全屏图文左右滑动切换特效
基于HTML5全屏图文左右滑动切换特效.这是一款基于jQuery+HTML5实现的全屏图文切换特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <main> & ...
- HTML5全屏操作API
一.定义:HTML5规范允许自定义网页上的任一元素全屏显示,存在兼容问题 二.使用: ①基本: Node.RequestFullScreen()开启全屏显示 Node.CancelFullScreen ...
- HTML5全屏背景视频与 CSS 和 JS(插件或库)
译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就 ...
- How to Use HTML5 FUll Screen API(如何使用HTML5全屏接口) 【精】
原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 如果你不太喜欢变化太快的东西,那么web开发可能不适合你.我曾在2012年末有写过Fu ...
- 一款基于jQuery和HTML5全屏焦点图
今天爱编程小编给大家分享一款非常绚丽的jQuery焦点图插件,同时这款焦点图也利用了HTML5和CSS3的相关特性,使图片切换效果更加丰富多彩.另外,这款jQuery焦点图插件的特点是全屏的效果,因此 ...
- How to Use HTML5 FUll Screen API(怎样使用HTML5全屏接口)
原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 假设你不太喜欢变化太快的东西,那么web开发可能不适合你. 我曾在2012年末有写过F ...
- 利用 chrome 做本地HTML5全屏应用
现在HTML5已经很强大了,如何让网页看起来像本地应用呢?仅chrome浏览器就可以实现.(但当然只能使用HTML的功能,不能操作本地系统) 以百度为例: 使用chrome打开百度 https://w ...
- html5 全屏滚动活动页学习
先看几个具体的实例: 1.腾讯娱乐:http://ent.qq.com/zt2014/qqent/h5.htm?from=groupmessage&isappinstalled=0 2.苏宁互 ...
随机推荐
- hibernate取出count(*)的办法
1.定义查询语句 String sql="select count(*) from ExcelInfor";2.获取count(*)返回结果: (1)int count=In ...
- html页面通过特殊链接:打电话,发短信,发邮件详细教程
采用url href链接的方式,实现在Safari ios,Android 浏览器,webos浏览器,塞班浏览器,IE,Operamini等主流浏览器,进行拨打电话功能. 1. 拨打电话 在电话号码 ...
- hdu 4848 Wow! Such Conquering! (floyd dfs)
Wow! Such Conquering! Problem Description There are n Doge Planets in the Doge Space. The conqueror ...
- java自带命令工具
jstat,这个工具很强大,可以监测Java虚拟机GC多方面的状态,具体参数含义参见此链接: ./jstat -gc 84012 1000 3 S0C S1C S0U S1U ...
- 原始的2文件的makefile错误
从来没系统的看过makefile文档,平时属于复制模板,用完即忘,下午尝试按自己的理解写一个最简单的makefile,含2个.c文件,1个.h文件,费了个把小时,参考别人的文章才弄出来,特记录. ma ...
- [学习嵌入式开发板]iTOP-4412实现NFS网络文件系统
本文转自迅为:http://www.topeetboard.com 学习平台:iTOP-4412开发板 本文讲解如何在 iTOP-4412 开发板上实现 NFS 网络文件系统. 我们使用的软硬件环境是 ...
- 在vscode中使用Git
用了git最方便的就是比如在公司写了很多代码后回到家打开vscode只需要点击一下pull就能全部同步过来.是不是很方便....毕竟之前我都是拿u盘拷贝回家或者存到云盘再下载下来.. 我这里用的是国内 ...
- POJ 2653 Pick-up sticks --队列,几何
题意: 按顺序扔木棒,求出最上层的木棒是哪些. 解法: 由于最上层的木棒不超过1000个,所以用一个队列存储最上层的木棒,每次扔出一个木棒后,都与队列中的木棒一一判断,看此木棒是否在某一最上层的木棒的 ...
- 测试 Mono 安装
测试 Mono 安装 为了测试核心编译器(mcs)和运行时(mono),应该创建一个简单的程序并编译它.可以在喜欢的任何文本编辑器中创建程序.这里采用一种快速而简陋的方法创建该文件(虽然没有任何格式化 ...
- java 13-1 数组高级二分查找
查找: 1.基本查找:数组元素无序(从头找到尾) 2.二分查找(折半查找):数组元素有序 pS:数组的元素必须有顺序,从小到大或者从大到小.以下的分析是从小到大的数组 二分查找分析: A:先对数组进行 ...