网页制作 标准提供了哪些新的 API HTML5 (网页制作标准语言)

本文目录导航：

• 网页制作：HTML5 标准提供了哪些新的 API
• 前端如何根据api权限控制页面
• 监测页面显示隐藏的API

网页制作：HTML5 标准提供了哪些新的 API

以下是之前学习的一些HTML5 API的总结，在HTML5中有许多功能和接口很值得我们去了解和学习。

页面可见性API--page Visbility全屏API --full Screen获取MediaAPI--getUserMedia电池API --battery资源预加载API--link PrefetchingPage Visibility 页面可见性API该API可以用来检测页面对于用户的可见性，即返回用户当前浏览的页面或标签tap的状态变化。

在最小化浏览器、切换tap页面时生效.(如需对app中几个webview进行切换操作时，可使用pageVisibility接口进行相应的事件监听和处理。

)page visibility的介绍【】 该值表示page是否是可见的,值为boolean值【】 这个visibilitystate 可有三个值得可能：【visible】 表示该page是处于最前面的页面并且不是处于一个最小化的窗口【hidden】 表示该page不是处于最前面的页面或者是处于一个最小化的窗口【prerender】 表示该页面内容正在重新渲染并且该页面对于用户是不可见的【isibilitychange Event】*监听window visibility 的改变的事件相关代码：// 设置隐藏属性和可见改变事件的名称，属性需要加浏览器前缀 // since some browsers only offer vendor-prefixed support var hidden, state, visibilityChange; if (typeof !== undefined) { hidden = hidden; visibilityChange = visibilitychange; state = visibilityState; } else if (typeof !== undefined) { hidden = mozHidden; visibilityChange = mozvisibilitychange; state = mozVisibilityState; } else if (typeof !== undefined) { hidden = msHidden; visibilityChange = msvisibilitychange; state = msVisibilityState; } else if (typeof !== undefined) { hidden = webkitHidden; visibilityChange = webkitvisibilitychange; state = webkitVisibilityState; } // 添加一个标题改变的监听器 (visibilityChange, function(e) { // 开始或停止状态处理 }, false); page visibility的用处对于visibility的改变，我们可以怎么用了做什么呢。

我们可以对那些定期刷新内容的页面进行控制，当该页面不可见则不刷新，可见则刷新我们还可以根据页面的是否可见来暂停和继续音频，视频的播放我们还可以根据页面可见去计算我们网站的用户停留在本页面的更为精确的数据，而不仅仅是打开页面而不停留在本页面。

Full Screen API全屏API该API允许开发者以编程方式将Web应用程序全屏运行，使Web应用程序更像本地应用程序。

十分简单有用的 Screen 的介绍FullScreen 的API使用非常简单，其有两种模式Launching Fullscreen Mode 启动全屏模式// 找到适合浏览器的全屏方法 function launchFullScreen(element) { if() { (); } else if() { (); } else if() { (); } } // 启动全屏模式 launchFullScreen(); // the whole page launchFullScreen((videoElement)); // any individual element Exit FullScreen Mode 退出全屏模式// Whack fullscreenfunction exitFullscreen() { if() { (); } else if() { (); } else if() { (); } } // Cancel fullscreen for browsers that support it! exitFullscreen(); Full Screen 的相关属性和事件目前fullscreen 仍存在兼容的问题，许多能使用的浏览器仍需要在其相应的属性和事件加相关的前缀。

【】 该属性表示启动全屏的元素（如 video这些）【】该属性表示当前是否全屏【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目前可能存在兼容性的问题，但相信不久的将来肯定会是一个使用频率超高的apigetUserMedia API该API允许Web应用程序访问摄像头和麦克风，而无需使用插件,该API在客户端最先支持的，但在pc端仍不可用。

getUserMedia API 的介绍先阅读下下面的htmlSnap Photo 相关JS代码// 设置事件监听器 (DOMContentLoaded, function() { // 获取元素 var canvas = (canvas), context = (2d), video = (video), videoObj = { video: true }, errBack = function(error) { (Video capture error: , ); }; // 设置video监听器 if() { // Standard (videoObj, function(stream) { = stream; (); }, errBack); } else if() { // WebKit-prefixed (videoObj, function(stream){ = (stream); (); }, errBack); } }, false); 一旦确定当前浏览器是支持getUserMedia的时， 我们可以同简单的方法将当前我们的video元素的src视频地址赋值给用户手机本地的video，然后通过video的play方法拉起本地video的启动和连接。

这样的话我们就可以使用本地的播放器来播放。

电池API（Battery API）这是一个针对移动设备应用程序的API，主要用于检测设备电池信息。

Battery API 的介绍var battery = || || ; // 电池属性 (Battery charging: , ); // 当前电池是否在充电 true (Battery level: , ); // 0.58 (Battery discharging time: , ); // 添加事件监听器 (chargingchange, function(e) { (Battery charge change: , ); }, false); 为什么获取电池信息的API为什么我们需要用到battery api？现在许多移动端apps都内嵌着web浏览器包装的（不再是完全native的应用）。

所以我们需要一个方法去获取系统的信息，app有一些过程是`十分耗电的，然后我们就需要在用户启动时给用户一些警告信息告诉用户当前设备电量较低。

这是一个十分重要简单的api.相应在不久的将来会发挥应有的作用。

Link Prefetching【预加载】预加载网页内容为浏览者提供一个平滑的浏览体验。

这个api我们在业务偶尔也会使用到什么是link预加载Link prefetching 是利用浏览器最佳的时间去下载或者预加载一些用户可能将会在不久将来浏览的文档的一种浏览器机制。

!-- full page --] [link href=/] [!-- just an image --] [link href=/] 什么时候使用link预加载是否在自己的网站使用预加载，可以参考一下几点：当你做的是一种类似slideshow的网页，需要提前加载近1-3张页面（假设这些页面并不大）预先加载在网站中许多网页都会用到的图片预先加载网站搜索的结果的页面

前端如何根据api权限控制页面

前端可以通过以下步骤来实现根据API权限控制页面：1、获取用户权限信息：前端需要向后端发送请求，获取当前用户的权限信息。

一般情况下，权限信息会以JSON格式返回。

2、根据权限信息控制页面元素：前端可以通过判断用户权限信息来控制页面元素是否显示或者启用。

例如，如果当前用户没有某个操作的权限，可以将该操作按钮禁用或者隐藏。

3、拦截API请求：前端可以通过拦截API请求的方式来控制用户是否能够访问该API。

一般情况下，如果用户没有权限访问某个API，后端会返回相应的错误码和错误信息，前端可以根据这些信息来提示用户或者跳转到其他页面。

监测页面显示隐藏的API

很多时候我们都有这样的需求，当页面不显示的时候去做一些操作或者禁止一些操作。

Page Visibility API为我们实现这个需求提供了方便。

该API依赖于document对象，有两个属性和一个事件，我们来依次看一下： 该属性直接返回一个页面是否隐藏的布尔值，因为属性名是 hidden ，所以返回true说明当前页面不可见。

相反，如果返回false说明页面可见。

该属性和 实现的功能几乎一样，只是返回值不同而已，返回的是一个可见性状态的字符串， visible 或者 hidden 通过给document绑定该事件可以监听页面可见性的变化，无论是你最小化了浏览器还是跳转到了另外一个页面，都会触发。

下面结合上面的属性，写一个最简单的场景实现： 实现想不出还会有什么其他复杂的场景了，欢迎各位大佬补充。