HTML5提供了一些非常强大的JavaScript和HTML API,来帮助开发者构建精彩的桌面和移动应用程序。本文将介绍5个新型的API,希望对你的开发工作有所帮助。

  1.  全屏API(Fullscreen API)

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

// 找到适合浏览器的全屏方法  

function launchFullScreen(element)   {

  if(element.requestFullScreen)   {

    element.requestFullScreen();  

  } else if(element.mozRequestFullScreen) {

    element.mozRequestFullScreen();

  } else if(element.webkitRequestFullScreen)   {

    element.webkitRequestFullScreen();

  }

}

// 启动全屏模式  

launchFullScreen(document.documentElement);   // the whole page

launchFullScreen(document.getElementById("videoElement"));   // any individual element

  2.  页面可见性API(Page Visibility API)

  该API可以用来检测页面对于用户的可见性,即返回用户当前浏览的页面或标签的状态变化。

// 设置隐藏属性和可见改变事件的名称,属性需要加浏览器前缀   

// 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"; 

} 

// 添加一个标题改变的监听器   

document.addEventListener(visibilityChange,   function(e) { 

  // 开始或停止状态处理 

}, false);

  3.  getUserMedia API

  该API允许Web应用程序访问摄像头和麦克风,而无需使用插件。

// 设置事件监听器   

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   = stream; 

      video.play();   

    }, errBack); 

  } else if(navigator.webkitGetUserMedia)   { // WebKit-prefixed 

    navigator.webkitGetUserMedia(videoObj,   function(stream){ 

      video.src   = window.webkitURL.createObjectURL(stream); 

      video.play();   

    }, errBack); 

  } 

}, false);

  4.  电池API(Battery API)

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

var battery =   navigator.battery || navigator.webkitBattery || navigator.mozBattery; 

// 电池属性   

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);

  5.  Link Prefetching

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

  

<!-- full page -->

<link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" /> 

<!-- just an image -->

你可能不知道的5 个强大的HTML5 API 函数的更多相关文章

  1. 你可能不知道的5个功能强大的 HTML5 API

    HTML5 新增了许多重要的特性,像 video.audio 和 canvas 等等,这些特性使得能够很容易的网页中包含多媒体内容,而不需要任何的插件或者 API.而其它的新元素,例如 section ...

  2. [转]你可能不知道的五个强大HTML5 API

    一.全屏 // 找到适合浏览器的全屏方法 function launchFullScreen(element) { if(element.requestFullScreen) { element.re ...

  3. [lua] 你所不知道的lua nil值在可变参数函数中怎么处理!

    在lua中, 问题1:如果你在可变参数...中传入若干个参数,其中有的参数要带nil,这时怎么解决呢?(比如local function _test(...) end    _test(1, nil, ...

  4. 5 个强大的 HTML5 API

    HTML5提供了一些非常强大的JavaScript和HTML API,来帮助开发者构建精彩的桌面和移动应用程序.本文将介绍5个新型的API,希望对你的开发工作有所帮助. 1.  全屏API(Fulls ...

  5. 你所不知道的setTimeout

    JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.它们向任务队列添加定时任务.初始接触它的人都觉得好简单 ...

  6. [iOS翻译]《iOS 7 Programming Pushing the Limits》系列:你可能不知道的Objective-C技巧

    简介: 如果你阅读这本书,你可能已经牢牢掌握iOS开发的基础,但这里有一些小特点和实践是许多开发者并不熟悉的,甚至有数年经验的开发者也是.在这一章里,你会学到一些很重要的开发技巧,但这仍远远不够,你还 ...

  7. 10686 DeathGod不知道的事情

    Description 蚂蚁是很强大的动物,除了DeathGod知道的事情外还有很多不知道的!例如… 根据某种理论,时间方向上有无数个平行世界,有的世界蚂蚁很多,有的世界蚂蚁很少,有的世界蚂蚁会繁殖, ...

  8. 不知道的陷阱:C#委托和事件的困惑

    转载网址:http://www.cnblogs.com/buptzym/archive/2013/03/15/2962300.html 不知道的陷阱:C#委托和事件的困惑   一. 问题引入 通常,一 ...

  9. [转载]或许您还不知道的八款Android开源游戏引擎

    或许您还不知道的八款Android开源游戏引擎         分类:             技术文章              2010-08-04 20:27     17430人阅读     ...

随机推荐

  1. @Resource与@Autowired注解的区别(转)

    Spring不但支持自己定义的@Autowired注解,还支持由JSR-250规范定义的几个注解.如:@Resource.@PostConstruct及@PreDestroy 1.@Autowired ...

  2. <泛> STL - stack 模拟实现

    今天,看C++Template的时候看到那人写了一个Stack,于是乎,手痒,自己也写了一个,在拜读了STD文件和C++模板元编程某些小节之后,你们就看到了这篇代码. 经过上述一番经历之后,我重新写了 ...

  3. Openstack-开发基础 stevedore学习

    在给openstack-N版加路由的时候发现怎么都无法搞定,原来现在用这个模块来处理了 stevedore是用来实现动态加载代码的开源模块.它是在OpenStack中用来加载插件的公共模块.可以独立于 ...

  4. 【构造】Codeforces Round #480 (Div. 2) B. Marlin

    题意:给你一个4*n的网格,保证n为奇数,让你在其中放k个障碍物,不能放在边界的格子上,使得从左上角走到右下角的最短路的方案数,恰好等于从左下角走到右上角的最短路的方案数. k为偶数时,以纵向为对称轴 ...

  5. 2018-2019-2 20162318《网络对抗技术》Exp3 免杀原理与实践

    一.实验内容 1.正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion),加壳工具),使用shellcode编程 2.通过组合应用各种技术实现恶意代码免杀(如果成 ...

  6. Codeforces Round VK Cup 2015 - Round 1 (unofficial online mirror, Div. 1 only)E. The Art of Dealing with ATM 暴力出奇迹!

    VK Cup 2015 - Round 1 (unofficial online mirror, Div. 1 only)E. The Art of Dealing with ATM Time Lim ...

  7. opencv第二课 进行缩放图片~

    #include<stdio.h> #include<iostream> #include<opencv2\opencv.hpp> using namespace ...

  8. spring---aop(4)---Spring AOP的CGLIB动态代理

    写在前面 前面介绍了Spring AOP的JDK动态代理的过程,这一篇文章就要介绍下Spring AOP的Cglib代理过程. CGLib全称为Code Generation Library,是一个强 ...

  9. 开发npm模块经验总结

    1.在windows下开发的package.json的bin链接的全局命令可能会在linux下报错:“没有那个文件或目录”之类的错误...此时可以在linux下用vim打开bin链接的js文件,设置s ...

  10. BZOJ 2049: [Sdoi2008]Cave 洞穴勘测 (动态树入门)

    2049: [Sdoi2008]Cave 洞穴勘测 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 1528  Solved: 644[Submit][ ...