图片 1

HTML5中与页面显示相关的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.addEventListener(‘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

在HTML第55中学,新扩充了一个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.addEventListener(‘fullscreenchange’,function(){
fullscreentState.innerHTML = (document.fullscreen) ? “全屏呈现” :
“非全屏显示”; },false);
document.add伊夫ntListener(‘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
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

 errBack);

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 的全顾客端第一位称TCG游戏,
那真是叁个应用全屏方式的绝佳案例。

全屏API提供了进入和退出全屏格局的不二秘籍,并提供对应的轩然大波来监测全屏状态的改观,所以各地方都连贯起来了.

请深深记住这些很好的API吧 —— 在今后的某部时刻,它必然会派上用项!

那篇小说首要介绍了HTML5全屏(Fullscreen)API详细介绍,本文给出了开发银行全屏格局和分离全屏方式代码…

HTML5落到实处页面切换激活的PageVisibility API使用初探,pagevisibilityapi

HTMl5 推出了三个很“极其”的 API Page Visibility
,之所以说它极其,是因为那个 API 关切的是一个比超级少人当心的效果与利益 ——
浏览器标签( tab )
是还是不是被激活。这里不可不解释一下,那个“激活”,指的是以此标签是或不是正被客户浏览,或然说是不是为最近标签。

那么,那些 API
究竟多少如何用途呢?平日,超多观念的页面在客户没有激活它的时候,它还恐怕会接二连三做事,比方,当顾客正在浏览音讯门户,而他事先打开的
NBA球赛页面会继续刷新获取最新结果,录像网址会继续占领带宽加载财富,于是,要是那类没有必要的工作太多了,就能以致广大的能源浪费。由此,那货万分实用:

Web
程序每间距生机勃勃段时间会自动更新页面新闻,确认保证客商得到到登时的音信,然而,当顾客正在浏览其余页面时,能够操纵它搁浅更新。
录像网址在广播在线录像时会不断加载录制,直到摄像加载完结,不过,当客商正在浏览别的页面时,能够暂停加载录制财富,节省带宽。
网址首页上有个大幻灯自动播放,当客户浏览别的页面了,就能够暂停止播放放。
于是乎,通过 Page Visibility ,大家可乃起码达到以下生龙活虎种或三种的裨益:

1.节省服务器财富,Ajax
轮询那类服务器财富占用平日会被忽视,关闭这种央求能够节约财富。
2.节本省部存款和储蓄器消耗。
3.节省带宽消耗。

之所以,使用 Page Visibility 无论是对于顾客依旧服务器皆有裨益。

接下去正式介绍一下这几个 API 。Page Visibility 会在浏览器的 document
对象上增多四个性情 hidden 和 visibilityState
。假如当前的竹签被激活了,那么 document.hidden 的值为 false ,否则为
true 。visibilityState 则有4个恐怕值:

hidden:当浏览器最小化、切换标签、计算机锁屏时 visibilityState 值是
hidden
visible:当浏览器最超级上下文(context卡塔 尔(阿拉伯语:قطر‎的 document
最少展现在二个显示器中间时,重回visible;当浏览器窗口没有最小化,可是浏览器被其余应用遮挡时,此时也为
visible
prerender:当文书档案被加载到显示屏画面以外或然不可以预知时再次回到prerender,那个是非须要属性,浏览器可选取性的援救。
unloaded:当文书档案将在被离开 ( unload 卡塔 尔(阿拉伯语:قطر‎ 时再次来到unloaded,浏览器也可采用性的扶持这一个个性
其他,document 上会加多 visibilitychange 事件,当 document
的可以知道性改动时触发该事件。

好了,介绍完属性,放上一个 德姆o (张开后切换标签就能够测量试验卡塔 尔(阿拉伯语:قطر‎。

其生机勃勃 德姆o 的功用是监听标签的可知性是不是变动
,何况在标签可以知道性发生纠正时产生提醒。

值得注意的是,在这里时此刻,浏览器对于 Page Visibility
的支撑还是通过个人属性协助,因此在检验或行使 Page Visibility
提供的性质时索要增添浏览器私有前缀,比方在 Chrome 中检查实验方面包车型客车visibilityState 属性时,就要求检查实验 document.webkitVisibilityState 并不是document.visibilityState 。所以,Demo 中会首先检查测验浏览器类型,然后才使用
Page Visibility 的 API 。重要代码如下:

JavaScript Code复制内容到剪贴板

  1. function browerKernel(){   
  2.     
  3.     var result;   
  4.     
  5.     [‘webkit’, ‘moz’, ‘o’, ‘ms’].forEach(function(prefix){   
  6.     
  7.         if( typeof document[ prefix + ‘Hidden’ ] != ‘undefined’ ){   
  8.             result = prefix;   
  9.         }   
  10.     });   
  11.     
  12.     return result;   
  13.     
  14. }   
  15.     
  16. function init(){   
  17.     
  18.     prefix = browerKernel();   
  19.     
  20.     var showTip = document.getElementById(‘showTip’);   
  21.     
  22.     document.addEventListener( prefix  + ‘visibilitychange’, function onVisibilityChange(e){   
  23.     
  24.         var tip = null;   
  25.                 
  26.         if( document[ prefix + ‘VisibilityState’ ] == ‘hidden’ ) tip = ‘<p>离开页面</p>’;   
  27.         else if( document[ prefix + ‘VisibilityState’ ]  == ‘visible’ ) tip = ‘<p>走入页面</p>’;   
  28.     
  29.         showTip.innerHTML = showTip.innerHTML + tip;   
  30.     });   
  31. }   
  32.     
  33. window.onload = init();   
  34.   

再再来看二个实际的事例,代码如下:

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE HTML>       
  2. <html>       
  3. <head>       
  4.      <script type=”text/javascript”>       
  5.           timer = 0;       
  6.           function onLoad(){       
  7.                document.addEventListener(“visibilitychange”,stateChanged);       
  8.                document.addEventListener(“webkitvisibilitychange”, stateChanged);    
      
  9.                document.addEventListener(“msvisibilitychange”, stateChanged);       
  10.           }       
  11.           function stateChanged(){    
      
  12.                console.log(document.webkitVisibilityState);       
  13.                if(document.hidden || document.webkitHidden || document.msHidden){    
      
  14.                     //new tab or window minimized     
  15.                     timer = new Date().getTime();       
  16.                }       
  17.                else {       
  18.                     alert(‘You were away for ‘ + (new Date().getTime()-timer)/1000+ ‘ seconds.’)       
  19.                }       
  20.           }       
  21.      </script>       
  22. </head>       
  23. <body onLoad=”onLoad()”>       
  24. </body>       
  25. </html>    

在上头的代码中,相近,在CHROME运转下,在LOAD事件中,监听了有关的
webkitvisibilitychange事件(这一个在CHROME下),如若是IE 10,则是
msvisibilitychange事件,然后在回调函数中,起始了总结顾客在页面停留的年月,
所以当您张开其余TAB页或然最小化后,再切换回原本这么些页,则会JAVASCPAJEROIPT
弹出呈现:你相差了页面多久 。
要留意的是,在CHROME中,属性命名称为webkitHidden,事件为
webkitvisibilitychange事件,而在IE 第10中学,属性为msHidden 和
msVisibilityState.

API使用初探,pagevisibilityapi HTMl5 推出了贰个非常特殊的 API Page
Visibility ,之所以说它非常,是因为这一个…

 

    videoObj

      video.play();

  visibilityChange

function(stream){

 {

 

 找到切合浏览器的全屏方法

 battery.charging);

document.msHidden !== “undefined”)

 {

function()

<link

var

  教程 / 演示

  state

 

 

    element.requestFullScreen();

document.addEventListener(visibilityChange,

  

battery.addEventListener(“chargingchange”,

 error.code); 

//

 {

(typeof

  state

 

 = “msvisibilitychange”;

 

 

launchFullScreen(document.documentElement);

    context

  4.  电池API(Battery API)

//

 

 capture error: “,

 = “webkitVisibilityState”;

//

 运维全屏方式

 

 

},

 { //

 

 

 获取成分

 

 

  //

 

//

 

false);

(typeof

 

    },

  3.  getUserMedia API

 

 

 

  console.warn(“Battery

 {

 

  

  教程

 = “webkitHidden”;

 

 errBack);

    video

 

 

 

 

 

 0.58

<!–

  该API允许开辟者以编制程序情势将Web应用程序全屏启动,使Web应用程序更像本地应用程序。

else

admin

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注