html5 函数大全,5 个强大的HTML5 API 函数推荐
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
预加载网页内容,为浏览者提供一个平滑的浏览体验。
复制代码代码如下:
http://davidwalsh.name/css-enhancements-user-experience" />
以上就是这5个新型的API了,小伙伴们了解了吗,有什么疑问请留言,大家一起讨论,共同进步。
html5 函数大全,5 个强大的HTML5 API 函数推荐相关推荐
- hive 如何将数组转成字符串_Hive函数大全(含例子)之字符串函数(String Functions)...
字符串函数 String Functions ascii(string str) 返回结果: 返回字符串str首字母的十进制ascii码返回类型: intselect ascii('ABC'); -- ...
- mysql c api 函数 linux下 mysql_query_Linux C 调用MYSQL API 函数mysql_escape_string()转义插入数据...
标签: Title:Linux C 调用MYSQL API 函数mysql_escape_string()转义插入数据 --2013-10-11 11:57 #include #include #in ...
- python函数大全和意思_python 之 内置函数大全
一.罗列全部的内置函数 二.range.xrange(迭代器) 无论是range()还是xrange()都是Python里的内置函数.这个两个内置函数最常用在for循环中.例如: >>&g ...
- excel中vlookup函数的使用方法_Excel函数大全:工作中最常用的函数汇总
最近接触了很多数据处理和分析的工作,Excel.SPSS.SQL都慢慢熟练起来,后两者还没到复盘的时候,Excel我早就想复盘了. 今天要复盘的是近一年我使用最多的函数,如果吸收完这一篇,可以抵一年的 ...
- 计算机函数名功能,修改计算机名的 API 函数 SetComputerName
;~ 设置一个新的本地计算机的NetBIOS名称.这个名字是存储在注册表和更改名称生效在下次用户重新启动计算机. ;~ 如果本地计算机是在一个群集节点,SetComputerName设置本地计算机的N ...
- 效果奇特的HTML5动画,12个效果奇特的HTML5动画赏析
本文将为大家分享12个效果奇特的HTML5动画,HTML5强大的动画特性可以让你的网页变得更加生动和富有活力,交互性也会进一步得到提高.一起来看看下面的这些HTML5动画案例,每个案例都提供源代码下载 ...
- 效果奇特的HTML5动画,12个效果奇特的HTML5动画赏析 – 码农网
1.HTML5 Canvas瀑布动画 超逼真 这次我们来分享一款很酷的HTML5 Canvas瀑布动画,瀑布动画非常逼真.整个瀑布动画像是从石头缝里流出来的溪水,然后沿着悬崖飞落下来,效果非常不错. ...
- c语言s开头的函数以及作用,C语言函数大全-s开头-完整版.doc
C语言函数大全-s开头-完整版 C语言函数大全(s开头) 函数名: sbrk 功能: 改变数据段空间位置 用法: char *sbrk(int incr); 程序例: #include#include ...
- c语言字符串英文,C语言字符串函数大全(国外英文资料).doc
C语言字符串函数大全(国外英文资料) C语言字符串函数大全(国外英文资料) It's all the same -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- ...
最新文章
- ​机器学习中必要的数学基础!
- ajax返回显示下拉列表,ajax中网页传输(二)JSON——下拉列表显示练习(示例代码)...
- 安装Matlab出现Error 1935错误解决方法
- Java进阶:CAS原理详解
- linux通过html显示图片,如何在Linux上将HTML页面转化成Png图片?
- uniapp 表单页面_uniapp自定义表单模板经验分享
- (3)二分频systemverilog与VHDL编码
- python实现第一个web_使用Python的Flask框架来搭建第一个Web应用程序
- [Ext JS]Grid的列过滤
- 怎么把excel表格内的数据导入数据库?
- 托福试卷真题_托福考试真题 - 韩语自学网
- JavaScript(BOM、窗口事件和计时器)
- 电脑常用工具集(开发,windows,持续更新)
- 2022年Web前端开发流程和学习路线
- JavaScript逻辑训练题(一)
- 关于使用KEIL建立STM32项目(附带建立好的工程以及注意事项)
- 跳一跳改分php源码,小游戏“跳一跳”居然可改分,微信小程序现漏洞
- 【周末福利日】资料免费赠送
- 激光切割过程中遇到毛边怎么办?
- chaos engineering读书笔记
热门文章
- 您的浏览器缺少对java的支持_windows10 登录vpn提示:您的浏览器没有得到JVM支持。请安装JVM1.5或以上版本--解决方案...
- lamda获取参数集合去空_集合源码解析之LinkedList
- Python学习之web框架 Flask
- hdu2157:How many ways??
- MVC+EF 随笔小计——NuGet程序包管理
- 安卓开发1-质量管理app-技术预演
- 下载加载linux下用vmware-mount挂载vmdk虚拟硬盘分区
- Vmware下安装CentOS6的特别注意,一定要在虚拟机上电时候按DEL,选择操作系统启动方式...
- NOTEBOOK随笔
- 关于 Oracle 存储双活配置和实战