HTML5发展到现在,虽说没有大规模的普及,但在我们日常生活中,也很容易见到了,HTML5的游戏、网站、应用也是层出不穷。而作为前端人员,也应该多了解这些API为以后应用打基础,下面我将给大家介绍 HTML5 新引入的API,并附上各个 API 的浏览器检测方法,我主要参考了最近看的《html5揭秘》和《html5高级程序设计》。

首先,我们先介绍下 Modernizr, 它是一个用来检测浏览器对 HTML5 和 CSS3 特性支持情况的开源 Javascript 类库,现在最新的是 2.5.3 版(下载),使用方法很简单,在页面里引入 JS 后,它会自动运行,并创建一个 Modernizr 全局对象,它为每一个可以检测的特性都创建了一个对应的布尔类型的属性,我们只要去调用就行了,例如:

if( Modernizr.canvas ){
// 恩,我知道这个属性,他是画图用的:)
}else{
// canvas 这是个什么东东??
}

1.Canvas
Canvas是依赖分辨率的位图画布,其绘制的图形是不可缩放的,你可以通过 Javascript 在 Canvas 上面绘制任何图形,甚至加载照片,HTML5标准制定了一系列 Canvas API,用于绘制简单的图形、定义路径、创建渐变及应用图像变换等 。一个 Canvas 就是一个矩形区域,默认情况下宽 300 像素,高 150 像素。
注意:Canvas绘制出来的对象不属于页面 DOM 结构或其他任何的命名空间。

// 创建一个 Canvas 元素,并检查该元素是否拥有 getContext() 方法,然后用双否定强制返回一个布尔值
var hasCanvas = !!document.createElement("canvas").getContext; // Modernizr检测方法,返回布尔值
var hasCanvas = Modernizr.canvas ;

2.Audio 和 Video
这两个元素的出现,让开发人员不必使用插件就可以播放音频或视频,HTML5规范还提供了通用的、完整的、可脚本化控制的API。

// 创建一个 Audio 元素,并检查该元素是否拥有 canPlayType() 方法,然后用双否定强制返回一个布尔值
var hasAudio = !!document.createElement("audio").canPlayType; // modernizr检测方法
var hasAudio = Modernizr.audio; // 创建一个 Video 元素,并检查该元素是否拥有 canPlayType() 方法,然后用双否定强制返回一个布尔值
var hasVideo = !!document.createElement("video").canPlayType; // modernizr检测方法
var hasVideo = Modernizr.video;

想检测是否支持默写格式,可以这么写:

var hasVideo = document.createElement("video").canPlayType('video/ogg; codecs="theora, vorbis"');

// modernizr检测方法
var hasVideo = Modernizr.video.ogg;

原生方法会返回 “probably”,”maybe” 或 “”,分别代表 “完全有把握播放此格式”,”有可能可以播放此格式”,”确定无法播放此格式”。
canPlayType() 方法传入的参数用文字表达就是在问浏览器,能否播放封装在 ogg 容器内的 “theora” 编码格式的视频和 “vorbis” 格式的音频。

3.Web Storage
Web Storage (也称 DOMStorage)允许开发者把数据存储在 Javascript 对象中,对象在页面加载时保存,并且容易获取。在打开新窗口或新标签页以及重新启动浏览器时,开发人员可以选择是否激活这些数据。存储的数据不会再网络上传输,并可以保存高达数兆字节的大数据。

// 支持的话,全局 window 对象会有一个 localStorage 属性
var hasWebStorage = window.localStorage; // modernizr检测方法
var hasWebStorage = Modernizr.localstorage;

4.Web Workers
Web Workers 可以让 Web 应用程序具备后台处理能力,它对多线程的支持非常好。因此,使用了 HTML5 的 Javascript 应用程序可以充分利用多核 CPU 带来的优势,把耗时长的任务分配给 Web Workers 去执行。
注意:在 Web Workers 中执行的脚步无法访问该页面的 window 对象。

// 支持的话,全局 window 对象会有一个 Worker 属性
var hasWorker = window.Worker; // modernizr检测方法
var hasWorker = Modernizr.webworkers;

5.Offline Web Applications
HTML5 的离线应用缓存使得在无网络连接状态下运行应用程序成为可能。在第一次访问具备离线访问功能的 Web 站点时,Web服务器会告诉浏览器哪些文件时保证离线正常工作所必需的,这些文件可以使任意的文件——HTML、Javascript、图片或是视频。

// 支持的话,全局 window 对象会有一个 applicationCache 属性
var hasApplicationCache = window.applicationCache; // modernizr检测方法
var hasApplicationCache = Modernizr.applicationcache ;

6.Geolocation
HTML5 的地理定位 API 能够定位出你在世界的什么地方,并在允许的情况下把该位置信息共享出去。这个神奇的功能可以构建出许多有趣的应用程序。比如计算跑步的路程,基于 GPS 导航的社交应用等等。它通过 IP 地址、GPS地理定位、Wi-Fi地理定位、手机地理定位、自定义地理定位获取定位数据。

// 支持的话,全局 navigator 对象会有一个 geolocation 属性
var hasGeolocation = navigator.geolocation; // modernizr检测方法
var hasGeolocation = Modernizr.geolocation;

7.Forms
HTML5 中定义了很多新的输入框类型:表示搜索的 search、数字类型输入框 number、范围选择滑块 range、颜色选择器 color、电话号码输入框 tel、网址输入框 url、邮件输入框 email、日期选择器 date、月份输入框 month、星期输入框 week、时间戳输入框 time、精确表示日期/时间戳出入框 datetime、当地日期和时间输入框 datetime-local。

// 创建一个 input 元素,该元素默认是 text 类型,改变他的类型,然后查看改变是否被保留
var o = document.createElement("input");
o.setAttribute("type","color");
return i.type != "text"; // modernizr检测方法
var hasInputType = Modernizr.inputtypes.color;

8.WebSockets
WebSockets 是 HTML5 中最强大的通信功能,它定义了一个全双工通信通道(又称为双向同时通信,即通信的双方可以同时发送和接受信息的信息交互方式),仅通过 Web 上的一个 Socket 即可进行通信。它不仅仅是对常规 HTTP 通信的另一种增量加强,更代表着一次巨大的进步,对实时的、事件驱动的程序而言更是如此。

// 支持的话,全局 window 对象会有一个 webSocket 属性
var hasWebSocket = window.webSocket; // modernizr检测方法
var hasWebSocket = Modernizr.websockets;

8.Communication
Communication 是 HTML5 中用来实现正在运行的两个页面之间(iframe、标签页、窗口)进行跨源通信和信息共享的API。它把 postMessage API 定义为发送消息的标准方式。

// 支持的话,全局 window 对象会有一个 postMessage 属性
var hasPostMessage = window.postMessage; // modernizr检测方法
var hasPostMessage = Modernizr.postmessage;

API 的浏览器支持情况主要介绍这些,以后我会逐个 API 进行详细讲解,把自己学到和研究的东西共享出来,欢迎大家来一块交流学习:)

HTML5 API 浏览器支持情况检测的更多相关文章

  1. CSS3&HTML5各浏览器支持情况一览表

    http://fmbip.com/ CSS3性质(CSS3 Properties) 平台 MAC WIN 浏览器 CHROME FIREFOX OPERA SAFARI CHROME FIREFOX ...

  2. ECMAScript 5和ECMAScript6的新特性以及浏览器支持情况

    ECMAScript简介: 它是一种由Ecma国际(前身为欧洲计算机制造商协会)制定和发布的脚本语言规范,javascript在它基础上经行了自己的封装.但通常来说,术语ECMAScript和java ...

  3. css选择器浏览器支持情况

    css选择器浏览器支持情况

  4. ECMAScript和JavaScript的区别,ECMAScript发展更新历史,ECMAScript5和ECMAScript6的新特性及浏览器支持情况,ECMAScript 5/ECMAScript 2015正式发布

    ECMAScript和JavaScript的区别 ECMA是European Computer Manufacturers Association的缩写,即欧洲计算机制造商协会.欧洲计算机制造商协会是 ...

  5. ECMAScript5和ECMAScript6_浏览器支持情况

    ECMAScript5浏览器支持情况: Opera 11.60 Internet Explorer 9* Firefox 4 Safari 5.1** Chrome 13 * IE9不支持严格模式 - ...

  6. 检测浏览器对HTML5和CSS3支持情况的利器——Modernizr

    Modernizr是什么? Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库. 目前,通过检验浏览器对一系列测试的处理情况,Modernizr 可以检测18项 CSS3 ...

  7. Web存储(Web Storage)的浏览器支持情况

    所有很酷的功能特征的出现最关键的就是浏览器的支持情况,幸运的是,所有的现代浏览器都支持HTML5 Web存储(Web Storage),从IE8开始也支持它.HTML5 Web存储(Web Stora ...

  8. HTML5的浏览器支持方案

    现代的浏览器基本都支持 HTML5,此外还有老浏览器. 不管是旧的还是最新的,HTML5对无法识别的元素会作为内联元素自动处理. 所以,在这里教大家怎么让浏览器去处理"未知"的HT ...

  9. css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

    原文地址: http://blog.csdn.net/jyy_12/article/details/42557241 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果 ...

随机推荐

  1. HDU 1166 敌兵布阵 线段树的基本应用——动态区间和问题

    题目: http://acm.hdu.edu.cn/showproblem.php?pid=1166 简单题,1A了,这个好像就是传说中的“点树”. 设当前结点表示线段[left, right],编号 ...

  2. POJ 1837 Balance 01背包

    题目: http://poj.org/problem?id=1837 感觉dp的题目都很难做,这道题如果不看题解不知道憋到毕业能不能做出来,转化成了01背包问题,很神奇.. #include < ...

  3. ListToDataTable

    public static DataTable ToDataTable<T>(IEnumerable<T> collection)       {           var ...

  4. SVN - 基础知识

    1. 术语 $ svn checkout  URL [PATH] -----   下载服务器所有文件 (clone) 到本地[path]  --- 只需一次 $ svn checkout  http: ...

  5. git 常用命令行整理

    1.创建分支dev git branch dev 2.切换到dev分支 git checkout dev 3.创建并切换本地分支,分支名为dev git checkout -b dev 4.查看本地所 ...

  6. 【poj3070】矩阵乘法求斐波那契数列

    [题目描述] 我们知道斐波那契数列0 1 1 2 3 5 8 13…… 数列中的第i位为第i-1位和第i-2位的和(规定第0位为0,第一位为1). 求斐波那契数列中的第n位mod 10000的值. [ ...

  7. Windows.document对象

    一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:var a =docunment.getElementById("i ...

  8. LiBsvm用于多分类时训练模型参数含义

    The 'svmtrain' function returns a model which can be used for futureprediction.  It is a structure a ...

  9. 消息队列feed程序实现中的问题

    因项目需要, 构建了很多消息队列还排队处理任务, 相应的每个队列也配有一个feed程序来feed消息 一开始很简单地这样做: while (true){ $msg = $query->bPop( ...

  10. PAIP.提升效率----论项目知识库的建设。。

    PAIP.提升效率----论项目知识库的建设.. 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.net ...