页面可见性API可以让你知 道一个页面什么时候是隐藏的,什么时候是显示的.当页面被最小化或者被切换成后台标签页时,浏览器会触发一个&事件,告诉你用户已经看不到这个页面了,切换到显示状态的时候也同样.你可以给该事件注册监听函数,在页面的可见与不可见状态进行切换时,执行对应的操作.
该API一个很好的用处就是能够在页面切换到不可见状态时暂停执行一些不必要的操作,以减少资源的浪费.
在一个多标签的浏览器中,某个网页所在的标签页很有可能被切换到后台,这时,该网页是用户不可见的. 一些网站很有可能希望在此时做出一些动作. 比如:
某网站有个图像幻灯片页面,自动播放图片.如果该页面被切换到了不可见状态,图片的播放操作应该暂停,直到该页面重新对用户可见时,幻灯片才会继续自动播放.
某web应用程序每隔一段时间会自动访问服务器更新页面内的及时信息.在页面不可见时,应该停止这种请求动作.
某页面想要检测自己是否被预渲染,这样可以获得更准确的页面访问量.
在过去,开发者使用一些不完善的手段间接的实现上述目的.例如通过使用onblur/onfocus事件,在当前页面失去焦点时得到通知.但这样仍然无法检测到正确的页面可见性(失去焦点并不意味着不可见,等等).如今,页面可见性API可以办到了.
查看(有声视频,页面不可见时,视频自动暂停.恢复可见时,视频自动播放,下面是实现代码):
document.hidden
如果该页面处于用户不可见的状态,返回true,否则返回false.
document.visibilityState
返回一个字符串,表明该页面的可见状态.可能的值有:
visible&: 页面内容至少部分可见.意味着该页面是一个非最小化窗口的前台标签页.
hidden&: 页面内容用户不可见.意味着当前浏览器窗口处于最小化模式,或者该页面是一个后台标签页.
prerender&: 页面内容正在被预渲染,用户不可见(这种情况下document.hidden会返回true). 一个页面只有在初始化时可能为这个值, 一旦变为其他两种值,不可能再变回来.
unloaded&: 当前文档已经被卸载,用户不可见(这种情况下document.hidden会返回true).
页面的可见性与父页面相同.使用CSS隐藏或显示这个iframe并不会触发它的visibilitychange事件.
阅读(...) 评论() &干货丨那些 HTML5 中你必须知道的API - 今日头条()
点击上方蓝字即可关注 51CTO前沿 | 干货 | 交流 | 共享API是指一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。以下是之前学习的一些HTML5 API的总结，在HTML5中有许多功能和接口很值得我们去了解和学习。页面可见性API--page Visbility全屏API --full Screen获取MediaAPI--getUserMedia电池API --battery资源预加载API--link Prefetching页面可见性API该API可以用来检测页面对于用户的可见性，即返回用户当前浏览的页面或标签tap的状态变化。 在最小化浏览器、切换tap页面时生效.(如需对app中几个webview进行切换操作时，可使用pageVisibility接口进行相应的事件监听和处理。)page visibility的介绍【document.hidden】：该值表示page是否是可见的,值为boolean值【document.visibilityState】：这个visibilitystate可有三个值得可能【visible】：表示该page是处于最前面的页面并且不是处于一个最小化的窗口【hidden】：表示该page不是处于最前面的页面或者是处于一个最小化的窗口【prerender】：表示该页面内容正在重新渲染并且该页面对于用户是不可见的【isibilitychange Event】：监听window visibility 的改变的事件相关代码：// 设置隐藏属性和可见改变事件的名称，属性需要加浏览器前缀 // since some browsers only offer vendor-prefixed support var hidden, state, visibilityC if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; state = "visibilityState"; } else if (typeof document.mozHidden !== "undefined") { hidden = "mozHidden"; visibilityChange = "mozvisibilitychange"; state = "mozVisibilityState"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; state = "msVisibilityState"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; state = "webkitVisibilityState"; } // 添加一个标题改变的监听器 document.addEventListener(visibilityChange, function(e) { // 开始或停止状态处理 }, false); page visibility的用处对于visibility的改变，我们可以怎么用了做什么呢。我们可以对那些定期刷新内容的页面进行控制，当该页面不可见则不刷新，可见则刷新我们还可以根据页面的是否可见来暂停和继续音频，视频的播放我们还可以根据页面可见去计算我们网站的用户停留在本页面的更为精确的数据，而不仅仅是打开页面而不停留在本页面。全屏API该API允许开发者以编程方式将Web应用程序全屏运行，使Web应用程序更像本地应用程序。十分简单有用的api.Full Screen 的介绍FullScreen 的API使用非常简单，其有两种模式Launching Fullscreen Mode 启动全屏模式// 找到适合浏览器的全屏方法 function launchFullScreen(element) { if(element.requestFullScreen) { element.requestFullS } else if(element.mozRequestFullScreen) { element.mozRequestFullS } else if(element.webkitRequestFullScreen) { element.webkitRequestFullS } } // 启动全屏模式 launchFullScreen(document.documentElement); // the whole page launchFullScreen(document.getElementById("videoElement")); // any individual element Exit FullScreen Mode 退出全屏模式// Whack fullscreenfunction exitFullscreen { if(document.exitFullscreen) { document.exitF } else if(document.mozCancelFullScreen) { document.mozCancelFullS } else if(document.webkitExitFullscreen) { document.webkitExitF } } // Cancel fullscreen for browsers that support it! exitF Full Screen 的相关属性和事件目前fullscreen 仍存在兼容的问题，许多能使用的浏览器仍需要在其相应的属性和事件加相关的前缀。【document.fullScreenElement】 该属性表示启动全屏的元素（如 video这些）【document.fullScreenEnabled】该属性表示当前是否全屏【fullscreenchange 事件】 监听全屏状态改变的事件Full Scrren 的相关css有一些关于fullscreen的css属性-webkit-full-screen, :-moz-full-screen, :-ms-fullscreen, :full-screen { /*pre-spec */ /* properties */ } :fullscreen { /* spec */ /* properties */ } /* deeper elements */:-webkit-full-screen video { width: 100%; height: 100%; } /* styling the backdrop*/::backdrop { /* properties */ } ::-ms-backdrop { /* properties */ } FullScreen的小结第一次见到这个API是在看一些手机小说和移动端漫画网站时，发现其有全屏的观看的功能。全屏api目前可能存在兼容性的问题，但相信不久的将来肯定会是一个使用频率超高的api获取MediaAPI该API允许Web应用程序访问摄像头和麦克风，而无需使用插件,该API在客户端最先支持的，但在pc端仍不可用。getUserMedia API 的介绍先阅读下下面的htmlSnap Photo相关JS代码// 设置事件监听器 window.addEventListener("DOMContentLoaded", function { // 获取元素 var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), video = document.getElementById("video"), videoObj = { "video": true }, errBack = function(error) { console.log("Video capture error: ", error.code); }; // 设置video监听器 if(navigator.getUserMedia) { // Standard navigator.getUserMedia(videoObj, function(stream) { video.src = video. }, errBack); } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed navigator.webkitGetUserMedia(videoObj, function(stream){ video.src = window.webkitURL.createObjectURL(stream); video. }, errBack); } }, false); 一旦确定当前浏览器是支持getUserMedia的时， 我们可以同简单的方法将当前我们的video元素的src视频地址赋值给用户手机本地的video，然后通过video的play方法拉起本地video的启动和连接。这样的话我们就可以使用本地的播放器来播放。电池API这是一个针对移动设备应用程序的API，主要用于检测设备电池信息。Battery API 的介绍var battery = navigator.battery || navigator.webkitBattery || navigator.mozB // 电池属性 console.warn("Battery charging: ", battery.charging); // 当前电池是否在充电 true console.warn("Battery level: ", battery.level); // 0.58 console.warn("Battery discharging time: ", battery.dischargingTime); // 添加事件监听器 battery.addEventListener("chargingchange", function(e) { console.warn("Battery charge change: ", battery.charging); }, false); 为什么获取电池信息的API为什么我们需要用到battery api？现在许多移动端apps都内嵌着web浏览器包装的（不再是完全native的应用）。所以我们需要一个方法去获取系统的信息，app有一些过程是`十分耗电的，然后我们就需要在用户启动时给用户一些警告信息告诉用户当前设备电量较低。这是一个十分重要简单的api.相应在不久的将来会发挥应有的作用。资源预加载API预加载网页内容为浏览者提供一个平滑的浏览体验。这个api我们在业务偶尔也会使用到。什么是link预加载Link prefetching 是利用浏览器最佳的时间去下载或者预加载一些用户可能将会在不久将来浏览的文档的一种浏览器机制。!-- full page --] [link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" /] [!-- just an image --] [link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" /] 什么时候使用link预加载是否在自己的网站使用预加载，可以参考一下几点：当你做的是一种类似slideshow的网页，需要提前加载近1-3张页面（假设这些页面并不大）预先加载在网站中许多网页都会用到的图片预先加载网站搜索的结果的页面51CTO读书频道我们分享书籍，也分享学习的快乐长摁二维码，即可参与读书频道送书活动先到先得，送完为止！
51CTO传媒是专注于IT技术创新与发展的互联网媒体平台。
是互联网IT新闻业界的后起之秀，是国内领先的即时科技资讯站点和网友交流平台。
威锋网是国内第一Apple互动媒体，是千万果粉大本营，是广大苹果爱好者交流的平台。
连接热爱 关注这个时代最好的产品
IT之家，数码、科技、生活。
关注互联网架构及高可用、可扩展及高性能领域的知识传播
(C) 2016 今日头条 违法和不良信息举报电话：010-公司名称：北京字节跳动科技有限公司前端面试题_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
前端面试题
上传于||文档简介
&&使​用​的​前​端​面​试​题
阅读已结束，如果下载本文需要使用2下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩4页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢