html5 的诞生给我们提供了很多精彩的 JavaScript 和 HTML 新功能和新特征. 有些新特征我们已知多年并大量的使用, 而另外一些主要是用在前沿的手机移动技术上, 或者桌面应用中起辅助作用. 不管这些 HTML5 新功能有多强大, 多好用, 它们都是为了帮助我们更好的开发浏览器前端应用. 我之前给大家分享过一篇你不知道的 5 个 HTML5 新功能, 目的是希望里面的提到的一些技术能帮助改进你的 web 应用. 这里我还想分享给大家一些少有人知道的 HTML5 新功能, 希望能对你有些用处!
一, 全屏 API 接口
强大的全屏 API 接口能让程序员通过编程启动浏览器进入全屏模式, 并请求用户的允许:
- // Find the right method, call on correct element
- function launchFullScreen(element) {
- if(element.requestFullScreen) {
- element.requestFullScreen();
- } else if(element.mozRequestFullScreen) {
- element.mozRequestFullScreen();
- } else if(element.webkitRequestFullScreen) {
- element.webkitRequestFullScreen();
- }
- }
- // Launch fullscreen for browsers that support it!
- launchFullScreen(document.documentElement); // the whole page
- launchFullScreen(document.getElementById("videoElement")); // any individual element
任何页面元素都可以成为全屏输出的目标, HTML5 里甚至还提供了一个 CSS 伪类来让程序员在浏览器全屏时控制全屏元素的样式. 当你在开发游戏时这个全屏 API 接口特别有用; 尤其像 BananaBread 这样的枪击游戏中.
阅读教程
二, 页面可见性 API 接口
页面可见性 API 接口提供给用了一个监听事件, 这个事件能告诉程序员当前页面是否是用浏览器中激活的标签页 / 窗口, 是否是用户正在观看的页面, 它还能告诉程序员用户何时切换页面, 不再观看本页面 / 窗口:
- // Adapted slightly from Sam Dutton
- // Set name of hidden property and visibility change event
- // since some browsers only offer vendor-prefixed support
- var hidden, state, visibilityChange;
- 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";
- }
- // Add a listener that constantly changes the title
- document.addEventListener(visibilityChange, function(e) {
- // Start or stop processing depending on state
- }, false);
通过灵活的使用这个 API, 程序员可以在用户不观看本页时暂停一些繁重的任务 (例如 Ajax 或动画).
阅读教程 观看演示
三, getUserMedia 接口 API
getUserMedia API 是个非常有趣的接口! 使用这个 API, 加上 < video > 和 < canvas > 标记, 你可以在浏览器里进行拍照!
- // Put event listeners into place
- Windows.addEventListener("DOMContentLoaded", function() {
- // Grab elements, create settings, etc.
- 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);
- };
- // Put video listeners into place
- if(navigator.getUserMedia) { // Standard
- navigator.getUserMedia(videoObj, function(stream) {
- video.src = stream;
- video.play();
- }, errBack);
- } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
- navigator.webkitGetUserMedia(videoObj, function(stream){
- video.src = Windows.webkitURL.createObjectURL(stream);
- video.play();
- }, errBack);
- }
- }, false);
你一定要在以后的应用中试试这个 HTML5 新功能, 通过浏览器进行各种各样的交互的技术已经越来越流行了!
阅读教程 观看演示
四, 电池接口 API
电池接口 API 很显然是专门为手机里的浏览器应用设计的, 它提供了读取设备里的电池电量和充电状态的功能:
- // Get the battery!
- var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
- // A few useful battery properties
- console.warn("Battery charging:", battery.charging); // true
- console.warn("Battery level:", battery.level); // 0.58
- console.warn("Battery discharging time:", battery.dischargingTime);
- // Add a few event listeners
- battery.addEventListener("chargingchange", function(e) {
- console.warn("Battery charge change:", battery.charging);
- }, false);
这些 HTML5 提供的电池接口 API 能直接将电池电量状态告诉 Web 应用, 而不需要借助电池传感器或第三方应用. 虽然不是一个特别大的功能, 但绝对是一个有用的接口.
阅读教程 观看演示
五, 页面预加载 (Link prefetch)API
页面预加载 (Link prefetch)API 功能能够让浏览器在后台静悄悄的预先加载 / 读取一些页面或资源到当前页面, 给用户一个顺滑的使用体验:
- <!-- 预加载一个页面 -->
- <link rel="prefetch" href="http://www.webhek.com/link-prefetch/" />
- <!-- 预加载一个图片 -->
- <link rel="prefetch" href="http://www.webhek.com/wordpress/wp-content/themes/webhek2/images/follow-us.jpg"
- />
阅读教程
就是这 5 个你需要知道和尝试的新 HTML5 API. 请注意, 这些新功能在几年之内就会流行起来, 所以, 越早接受这些 API, 你就能更好的创造出最前沿技术的 Web 应用. 花几分钟试试这些新功能, 看看你能用它们实现什么样的效果!
来源: http://www.webhek.com/post/more-html5-apis.html