当前位置:9992019银河国际 > 网络前端 > 增加了2个与页面显示相关的API

增加了2个与页面显示相关的API

文章作者:网络前端 上传时间:2019-10-15

HTML第55中学与页面呈现相关的API

2015/05/15 · HTML5 · HTML5

初藳出处: 涂根华的博客   

在HTML5中,扩充了2个与页面展现相关的API,分别是Page Visibility API与Fullscreen API; 功用分别如下:

Page Visibility API  是指当页面变为最小化状态也许客商将浏览器标签切换成任何标签时会触发。

Fullscreen API 是将页面全部或页面中有些局地区域设为全屏。

Page Visibility API的应用场馆如下:

  1. 二个应用程序中保有多幅图片的幻灯片式的一而再播发效果,当页面变为不可以知道状态(最小化状态只怕将客户浏览器标签切换来其余标签时),图片停播,当页面变为可以知道状态时,图片继续播放。
  2. 在贰个实时彰显服务器端消息的应用程序中,当页面处于不可以看到状态(最小化状态也许将客商浏览器标签切换成其余标签时),截止定时向服务器端诉求数据的拍卖,当页面变为可知状态,继续试行定时向服务器端央浼数据的管理。
  3. 在叁个具有播放录制功效的应用程序中,当页面处于不可以预知状态(最小化状态或许将顾客浏览器标签切换成别的标签时),暂停止播放放录制,当页面变为可知状态时,继续播放录制。

浏览器帮衬程度:Firefox10+,chrome14+,IE10+;

实现Page Visibility API

在利用Page Visibility API时,大家先是要求看清当前客商所使用的浏览器以至该浏览器是还是不是援助。代码如下决断:

JavaScript

if(typeof document.hidden !== 'undefined') { hidden = 'hidden'; visibilityChange = 'visibilitychange'; }else if(typeof document.mozHidden !== 'undefined') { hidden = 'mozHidden'; visibilityChange = 'mozvisibilitychange'; }else if(typeof document.msHidden !== 'undefined') { hidden = 'msHidden'; visibilityChange = 'msvisibilitychange'; }else if(typeof document.webkitHidden !== 'undefined') { hidden = 'webkitHidden'; visibilityChange = 'webkitvisibilitychange'; }

1
2
3
4
5
6
7
8
9
10
11
12
13
if(typeof document.hidden !== 'undefined') {
    hidden = 'hidden';
    visibilityChange = 'visibilitychange';
}else if(typeof document.mozHidden !== 'undefined') {
    hidden = 'mozHidden';
    visibilityChange = 'mozvisibilitychange';
}else if(typeof document.msHidden !== 'undefined') {
    hidden = 'msHidden';
    visibilityChange = 'msvisibilitychange';
}else if(typeof document.webkitHidden !== 'undefined') {        
    hidden = 'webkitHidden';
    visibilityChange = 'webkitvisibilitychange';
}

如上,在Page Visibility  API中,能够经过document对象的hidden属性值来判定页面是还是不是处于可知状态,当页面处于可以看到状态时属性值为false,当页面处于不可知状态时属性值为true。

在Page Visibility中,能够经过document对象的visibilityState属性值来决断页面包车型大巴可以知道状态。该属性值为多个字符串,其意义如下所示:

    visible: 页面内容部分可以知道,当前页面位于客商正在查看的浏览器标签窗口中,且浏览器窗口未被最小化。

    hidden: 页面内容对客商不可以知道。当前页面不在客商正在查阅的浏览器标签窗口中,或浏览器窗口已被最小化。

    prerender: 页面内容已被预渲染,可是对顾客不可以看到。

近来大家来看二个demo,页面中有二个video成分与多少个”播放”开关,客商单击”播放”按键时 按键文字变为 ’暂停”,相同的时间启幕播放video成分的录像,当页面变为最小化状态或顾客浏览器标签切换成别的标签时候,录像被搁浅播放,当页面复苏正常状态或客户将浏览器标签切回页面所在标签时,录像持续播放。

HTML代码如下:

JavaScript

<video id="videoElement" controls width=640 height=360 autoplay> <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora, vorbis"'/> <source src="Wildlife/Wildlife.webm" type='video/webm' > <source src="Wildlife/Wildlife.mp4" type='video/mp4'> </video> <button id="btnPlay" onclick="PlayOrPause()">播放</button> <div style="height:1500px;"></div>

1
2
3
4
5
6
7
<video id="videoElement" controls width=640 height=360 autoplay>
    <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora, vorbis"'/>
    <source src="Wildlife/Wildlife.webm" type='video/webm' >
    <source src="Wildlife/Wildlife.mp4" type='video/mp4'>
</video>
<button id="btnPlay" onclick="PlayOrPause()">播放</button>
<div style="height:1500px;"></div>

JS代码如下:

JavaScript

var hidden, visibilityChange, videoElement; if(typeof document.hidden !== 'undefined') { hidden = 'hidden'; visibilityChange = 'visibilitychange'; }else if(typeof document.mozHidden !== 'undefined') { hidden = 'mozHidden'; visibilityChange = 'mozvisibilitychange'; }else if(typeof document.msHidden !== 'undefined') { hidden = 'msHidden'; visibilityChange = 'msvisibilitychange'; }else if(typeof document.webkitHidden !== 'undefined') { hidden = 'webkitHidden'; visibilityChange = 'webkitvisibilitychange'; } document.addEventListener(visibilityChange,handle,false); videoElement = document.getElementById("videoElement"); videoElement.add伊芙ntListener('ended',videoEnded,false); videoElement.add伊夫ntListener('play',videoPlay,false); videoElement.addEventListener('pause',videoPause,false); // 假使页面变为不可以预知状态 则暂停录像播放 // 假使页面变为可知状态,则继续录制播放 function handle() { // 通过visibilityState属性值判别页面包车型客车可以见到状态 console.log(document.visibilityState); if(document[hidden]) { videoElement.pause(); }else { videoElement.play(); } } // 播放录像function play() { videoElement.play(); } // 暂停止播放放 function pause() { videoElement.pause(); } function PlayOrPause() { if(videoElement.paused) { videoElement.play(); }else { videoElement.pause(); } } function videoEnded(e) { videoElement.currentTime = 0; this.pause(); } function videoPlay(e) { var btnPlay = document.getElementById("btnPlay"); btnPlay.innerHTML = "暂停"; } function videoPause(e) { var btnPlay = document.getElementById("btnPlay"); btnPlay.innerHTML = "播放"; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
var hidden,
visibilityChange,
videoElement;
if(typeof document.hidden !== 'undefined') {
    hidden = 'hidden';
    visibilityChange = 'visibilitychange';
}else if(typeof document.mozHidden !== 'undefined') {
    hidden = 'mozHidden';
    visibilityChange = 'mozvisibilitychange';
}else if(typeof document.msHidden !== 'undefined') {
    hidden = 'msHidden';
    visibilityChange = 'msvisibilitychange';
}else if(typeof document.webkitHidden !== 'undefined') {
    hidden = 'webkitHidden';
    visibilityChange = 'webkitvisibilitychange';
}
document.addEventListener(visibilityChange,handle,false);
videoElement = document.getElementById("videoElement");
videoElement.addEventListener('ended',videoEnded,false);
videoElement.addEventListener('play',videoPlay,false);
videoElement.addEventListener('pause',videoPause,false);
// 如果页面变为不可见状态 则暂停视频播放
// 如果页面变为可见状态,则继续视频播放
function handle() {
    // 通过visibilityState属性值判断页面的可见状态
    console.log(document.visibilityState);
    if(document[hidden]) {
        videoElement.pause();    
    }else {
        videoElement.play();
    }
}
// 播放视频
function play() {
    videoElement.play();
}
// 暂停播放
function pause() {
    videoElement.pause();
}
function PlayOrPause() {
    if(videoElement.paused) {
        videoElement.play();
    }else {
        videoElement.pause();
    }
}
function videoEnded(e) {
    videoElement.currentTime = 0;
    this.pause();
}
function videoPlay(e) {
    var btnPlay = document.getElementById("btnPlay");
    btnPlay.innerHTML = "暂停";
}
function videoPause(e) {
    var btnPlay = document.getElementById("btnPlay");
    btnPlay.innerHTML = "播放";
}

实现Fullscreen API

在HTML5中,新添了二个Fullscreen API,其职能是将页面全部或页面中某些局地区域设为全屏突显状态。

浏览器帮忙程度:Firefox10+,chrome16+,Safari5.1+

在Fullscreen API中,能够通过DOM对象的根节点目的或有个别成分的requestFullscreen属性值和实践相呼应的艺术来推断浏览器是不是帮忙Fullscreen API。代码如下:

JavaScript

var docElm = document.documentElement; if(docElm.requestFullscreen) { docElm.requestFullscreen(); }else if(docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); }else if(docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); }

1
2
3
4
5
6
7
8
var docElm = document.documentElement;
if(docElm.requestFullscreen) {
        docElm.requestFullscreen();
}else if(docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
}else if(docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
}

在Fullscreen API中,也能够由此DOM对象或某些成分的exitFullscreen与CanvelFullScreen属性和艺术将这段日子页面或某些成分设定为非全屏展现状态。

日常来说代码:

JavaScript

if(document.exitFullscreen) { document.exitFullscreen(); }else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); }else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); }

1
2
3
4
5
6
7
if(document.exitFullscreen) {
    document.exitFullscreen();
}else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
}else if(document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
}

在Fullscreen API中,能够由此监听DOM对象或有些成分的fullscreenchange事件(当页面或因素从非全屏展现状态产生全屏展现状态,或从全屏展现状态变为非全屏呈现状态时触发)。代码如下:

JavaScript

document.addEventListener('fullscreenchange',function(){},false); document.addEventListener('mozfullscreenchange',function(){},false); document.addEventListener('webkitfullscreenchange',function(){},false);

1
2
3
document.addEventListener('fullscreenchange',function(){},false);
document.addEventListener('mozfullscreenchange',function(){},false);
document.addEventListener('webkitfullscreenchange',function(){},false);

在css样式代码中,大家能够利用伪类选用器来单独钦赐处于全屏显示状态的页面或因素样式:

JavaScript

html:-moz-full-screen { background:red; } html:-webkit-full-screen { background:red; } html:fullscreen { background:red; }

1
2
3
4
5
6
7
8
9
html:-moz-full-screen {
    background:red;
}
html:-webkit-full-screen {
    background:red;
}
html:fullscreen {
    background:red;
}

末尾我们来看贰个demo,在页面中有贰个按钮,点击后,页面会产生全屏状态,再点击后,页面会退出全屏;

HTML代码如下:

JavaScript

<input type="button" id="btnFullScreen" value="页面全屏显示" onclick="toggleFullScreen();"/> <div style="width:百分百;" id="fullscreentState">非全屏展现</div>

1
2
<input type="button" id="btnFullScreen" value="页面全屏显示" onclick="toggleFullScreen();"/>
<div style="width:100%;" id="fullscreentState">非全屏显示</div>

Javascript如下:

JavaScript

var docElm = document.documentElement; var fullscreentState = document.getElementById("fullscreentState"); var btnFullScreen = document.getElementById("btnFullScreen"); fullscreentState.style.height = docElm.clientHeight + 'px'; document.add伊夫ntListener('fullscreenchange',function(){ fullscreentState.innerHTML = (document.fullscreen) ? "全屏呈现" : "非全屏展现"; },false); document.addEventListener('mozfullscreenchange',function(){ fullscreentState.innerHTML = (document.mozFullscreen) ? "全屏呈现" : "非全屏呈现"; },false); document.add伊芙ntListener('webkitfullscreenchange',function(){ fullscreentState.innerHTML = (document.webkitFullscreen) ? "全屏展现" : "非全屏展现"; },false); function toggleFullScreen() { if(btnFullScreen.value == '页面全屏展现') { btnFullScreen.value = '页面非全屏呈现'; if(docElm.requestFullscreen) { docElm.requestFullscreen(); }else if(docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); }else if(docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } }else { if(document.exitFullscreen) { document.exitFullscreen(); }else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); }else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } btnFullScreen.value = "页面全屏展现"; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var docElm = document.documentElement;
var fullscreentState = document.getElementById("fullscreentState");
var btnFullScreen = document.getElementById("btnFullScreen");
fullscreentState.style.height = docElm.clientHeight + 'px';
document.addEventListener('fullscreenchange',function(){
    fullscreentState.innerHTML = (document.fullscreen) ? "全屏显示" : "非全屏显示";
},false);
document.addEventListener('mozfullscreenchange',function(){
    fullscreentState.innerHTML = (document.mozFullscreen) ? "全屏显示" : "非全屏显示";
},false);
document.addEventListener('webkitfullscreenchange',function(){
    fullscreentState.innerHTML = (document.webkitFullscreen) ? "全屏显示" : "非全屏显示";
},false);
function toggleFullScreen() {
    if(btnFullScreen.value == '页面全屏显示') {
        btnFullScreen.value = '页面非全屏显示';
        if(docElm.requestFullscreen) {
            docElm.requestFullscreen();
        }else if(docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        }else if(docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        }
    }else {
        if(document.exitFullscreen) {
            document.exitFullscreen();
        }else if(document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }else if(document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
        btnFullScreen.value = "页面全屏显示";
    }
}

赞 收藏 评论

图片 1

HTML5全屏(Fullscreen)API详细介绍,html5fullscreen

那篇作品主要介绍了HTML5全屏(Fullscreen)API详细介绍,本文给出了运维全屏方式和退出全屏方式代码示例,同不时间批注了Fullscreen 属性与事件,需求的心上人能够参见下

在一发真实的web应用程序中,JavaScript也变得特别给力.

FullScreen API 是三个新的JavaScript API,轻巧而又强盛. FullScreen 让大家能够通过编制程序的措施来向顾客要求全屏展现,借使交互完毕,任何时候能够脱离全屏状态.

在线演示德姆o:  Fullscreen API Example

(在那德姆o中,能够Launch ,Hide ,乃至Dump呈现相关属性,能够经过chrome的调控台查看日志新闻.)

运营全屏形式

全屏API requestFullscreen方法在局地老的浏览器里面还是接纳带前缀方式的方法名,由此大概供给张开检测判定:
(带前缀,意思正是逐个浏览器内核不通用.)

代码如下:
// 找到援救的艺术, 使用要求全屏的 element 调用
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"));

将索要全屏呈现的DOM成分作为参数,调用此方式就能够让window踏向全屏状态,不常候恐怕须求顾客同意(浏览器自身和客户交互),假使客户拒绝,则恐怕出现各个不完全的全屏.

借使客户同意步入全屏,那么工具栏以致任何浏览器组件会遮蔽起来,使document框架的宽度和中度横跨整个显示器.

剥离全屏格局

行使 exitFullscreen 方法能够使浏览器退出全屏,重返原先的布局. 该格局在局地老的浏览器上也是扶持前缀方法.

代码如下:
// 退出 fullscreen
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozExitFullScreen) {
document.mozExitFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}

// 调用退出全屏方法!
exitFullscreen();

请小心: exitFullscreen 只好通过 document 对象调用 —— 而不是应用普通的 DOM element.

Fullscreen 属性与事件

贰个坏音讯,到近些日子截止,全屏事件和方式照旧是带前缀的,好音讯正是快速主流浏览器就能够都帮衬。

1.document.fullscreenElement:  当前处于全屏状态的因素 element.
2.document.fullscreenEnabled:  标识 fullscreen 当前是或不是可用.

当步向/退出 全屏形式时,会触发 fullscreenchange 事件:

代码如下:
var fullscreenElement =
document.fullscreenEnabled
|| document.mozFullscreenElement
|| document.webkitFullscreenElement;
var fullscreenEnabled =
document.fullscreenEnabled
|| document.mozFullscreenEnabled
|| document.webkitFullscreenEnabled;

在初叶化全屏方法时,可以探测必要监听哪一个事件.

Fullscreen CSS

浏览器提供了一部分管用的 fullscreen CSS 调节准绳:

代码如下:
/* html */
:-webkit-full-screen {
/* properties */
}
:-moz-fullscreen {
/* properties */
}

:fullscreen {
/* properties */
}

/* deeper elements */
:-webkit-full-screen video {
width: 100%;
height: 100%;
}

/* styling the backdrop */
::backdrop {
/* properties */
}

在有些景况下,WebKit要求部分例外管理,所以在拍卖多媒体时,你可能供给地点的代码。

自身以为 Fullscreen API 顶尖轻巧,超级有用. 小编第二回看见这么些 API 是在二个名称为MDN's BananaBread demo 的全客商端首个人称卡牌游戏, 那真是一个使用全屏形式的绝佳案例。

全屏API提供了进来和剥离全屏形式的艺术,并提供对应的事件来监测全屏状态的更换,所以各个地方面都连贯起来了.

请牢记这些很好的API吧 —— 在以往的某部时刻,它断定会派上用场!

那篇作品首要介绍了HTML5全屏(Fullscreen)API详细介绍,本文给出了开发银行全屏格局和退出全屏情势代码...

本文由9992019银河国际发布于网络前端,转载请注明出处:增加了2个与页面显示相关的API

关键词: