当前位置: 首页 > news >正文

html5 全屏样式,HTML5 全屏特性

全屏功能是浏览器很早就支持的一项功能了,可以让你页面中的video, image ,div 等等子元素实现全屏浏览,从而带来更好的视觉体验,来看看怎么使用吧。先来看看有哪些API和事件支持。

API

// 元素请求全屏显示

element.requestFullscreen()

// 检测文档的当前状态是否允许执行全屏操作

document.fullscreenEnabled()

//当前显示的元素是否处于全屏状态,如果处于,则返回为非空对象,否则返回null

document.fullscreenElement()

//元素退出全屏显示

document.exitFullscreen()

上面除了RequestFullscreen()是支持element 对象以外,其他3个都只是支持document.

Event

fullscreenchange // 全屏状态更改时触发

fullscreenerror // 执行全屏错误时触发

由于每个浏览器实现的方式不一样,所以我们实际的调用中还不能直接这样写,需要针对不同的浏览器做支持检测,下面跟着详细的例子看下具体兼容代码。

html

FullScreen

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会默认把指定的全屏元素进行100%;height:100%,而Webkit则是显示一片黑色,所以这个地方就需要针对全屏的元素进行样式调整了,参考以上代码示例。

浏览器兼容情况

另外上面有说道下面几个问题,可以注意下。

IE11全屏状态下是不允许滚动的

IE11 并不允许通过keydown or pointerdown事件来触发msRequestFullscreen(),keypress 和click没有问题

IE11对iframe中使用全屏支持的并不是很好

在全屏模式中Safari阻塞了keyboard事件(出于安全考虑),但是我上面代码中,在Yosmite中,通过监听F12,Safari是可以正常工作的

Opera 12.1 使用老的标准:fullscreen-ancestor 伪类替代了 ::backdrop伪元素

总结

总之全屏是一个非常棒的特性,它可以让我们的Web拥有像原生应用一样体验,在以后的项目中会多尝试下这个特性。

本文参考

相关文章:

  • 计算机软考网络工程师历年真题,2019上半年软考网络工程师考试下午真题
  • plc是一台专用计算机对,PLC其实质上是一台工业控制用的专用计算机,它由硬件系统和软件系统两大部分组成...
  • 南航计算机英语面试自我介绍,南航应聘英语自我介绍4篇
  • 计算机系统 理论知识试卷,计算机理论期中考试题
  • 2000的笔记本能HTML,我想买一个笔记本,最好是2000--3000元,请高人给个配置单。谢谢,家用的。...
  • 安徽财贸职业学院计算机信息管理怎么样,让别人看看安徽财贸职业学院计算机系汪永涛辅导员如何对待我的!!...
  • 匹兹堡大学计算机科学世界排名,2020年匹兹堡大学QS世界排名
  • 上海科技大学和南方科技大学计算机,上海科技大学和南方科技大学哪个好?哪个更容易考?...
  • 计算机一级ps怎么保存,2017年计算机等考一级PS辅导:PS图像格式详细解说
  • 第十届计算机大赛获奖作品,我校学子斩获第十届中国大学生计算机设计大赛全国一等奖...
  • 电子计算机人工智能,人工智能的起源 ENIAC开启的电子计算机时代
  • 软件测试如何测试系统,软件测试中如何做好系统测试
  • 体育测试一般测什么软件,体能测试有哪些项目 体能测试具体测什么
  • 方舟官方服务器 如何自动施肥,《方舟生存进化》主播打造海上农场,能自动运营省时省力...
  • 网页截图服务器,命令行下的2款网页截图工具推荐