全屏功能是浏览器很早就支持的一项功能了,可以让你页面中的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拥有像原生应用一样体验,在以后的项目中会多尝试下这个特性。

本文参考

Using fullscreen mode

Fullscreen API Living Standard

How to Use the HTML5 Full-Screen API (Again)

HTML5 全屏特性的更多相关文章

  1. HTML5全屏浏览器兼容方案

    最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit  Firefox  IE Element.requestFullscreen() ...

  2. 基于HTML5全屏图文左右滑动切换特效

    基于HTML5全屏图文左右滑动切换特效.这是一款基于jQuery+HTML5实现的全屏图文切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <main> & ...

  3. HTML5全屏操作API

    一.定义:HTML5规范允许自定义网页上的任一元素全屏显示,存在兼容问题 二.使用: ①基本: Node.RequestFullScreen()开启全屏显示 Node.CancelFullScreen ...

  4. HTML5全屏背景视频与 CSS 和 JS(插件或库)

    译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就 ...

  5. How to Use HTML5 FUll Screen API(如何使用HTML5全屏接口) 【精】

    原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 如果你不太喜欢变化太快的东西,那么web开发可能不适合你.我曾在2012年末有写过Fu ...

  6. 一款基于jQuery和HTML5全屏焦点图

    今天爱编程小编给大家分享一款非常绚丽的jQuery焦点图插件,同时这款焦点图也利用了HTML5和CSS3的相关特性,使图片切换效果更加丰富多彩.另外,这款jQuery焦点图插件的特点是全屏的效果,因此 ...

  7. How to Use HTML5 FUll Screen API(怎样使用HTML5全屏接口)

    原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 假设你不太喜欢变化太快的东西,那么web开发可能不适合你. 我曾在2012年末有写过F ...

  8. 利用 chrome 做本地HTML5全屏应用

    现在HTML5已经很强大了,如何让网页看起来像本地应用呢?仅chrome浏览器就可以实现.(但当然只能使用HTML的功能,不能操作本地系统) 以百度为例: 使用chrome打开百度 https://w ...

  9. html5 全屏滚动活动页学习

    先看几个具体的实例: 1.腾讯娱乐:http://ent.qq.com/zt2014/qqent/h5.htm?from=groupmessage&isappinstalled=0 2.苏宁互 ...

随机推荐

  1. dom4j操作xml

    dom4j是一个Java的XML API,类似于jdom,用来读写XML文件.是一个非常优秀的Java XML API,具有性能优异.功能强大和极端易用使用的特点,同时它也是一个开放源工具.可以在这个 ...

  2. .NET(C#)中不同级别的安全透明代码对类型的影响

    测试代码将测试一个方法和类默认在全部信任权限下和部分信任权限下的代码类型. 上面说的默认就是指未加入其他安全透明类型的特性. 代码类型可以是: 透明代码(Transparent Code) 关键代码( ...

  3. Sping mvc 环境下使用kaptcha 生成验证码

    一.kaptcha 的简介 kaptcha 是一个非常实用的验证码生成工具.有了它,你可以生成各种样式的验证码,因为它是可配置的.kaptcha工作的原理是调用 com.google.code.kap ...

  4. javascript 特效实现(3)—— 鼠标滑过显示二级菜单效果

    1. 关键代码:使用 switch 或 if 判断语句,改变对应的二级菜单显示方式为 block 或 none function selectTabMenu(i){ switch(i){ case 7 ...

  5. Ubuntu16.04安装ROS-kinetic

    参考链接:http://www.voidcn.com/blog/wishchin/article/p-5972036.html 第一步: 软件源配置1. 增加下载源(增加ubuntu版的ros数据仓库 ...

  6. HttpURLConnection发送POST请求(可包含文件)

    import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.File; import java.io. ...

  7. Codeforces Round 261 Div.2 D Pashmak and Parmida's problem --树状数组

    题意:给出数组A,定义f(l,r,x)为A[]的下标l到r之间,等于x的元素数.i和j符合f(1,i,a[i])>f(j,n,a[j]),求有多少对这样的(i,j). 解法:分别从左到右,由右到 ...

  8. HDU 1556 Color the ball

    这题用线段树的话简直就是一个水题..不过刚学树状数组,要用一下. 题意:每次给你a,b,表明a~b之间涂色,然后最后一次输出每个气球被涂色的次数. 要用树状数组就要考虑怎么转化为前缀和问题,这题可以这 ...

  9. leetcode - Merge Sorted Array (run time beats 100.00% of cpp submissions.)

    /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListNode ...

  10. RabbitMQ 一二事(5) - 通配符模式应用

    之前的路由模式是通过key相等来匹配 而通配符,顾名思义,符合条件,则进行消息匹配发送 将路由键和某模式进行匹配.此时队列需要绑定要一个模式上. 符号“#”匹配一个或多个词,符号“*”匹配不多不少一个 ...