HTML5 API浏览器支持情况检测的详情介绍

PHP中文网 JavaScript

本文摘自PHP中文网，作者黄舟，侵删。

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

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

1

2

3

4

5

6

if( Modernizr.canvas ){ 

// 恩，我知道这个属性，他是画图用的：）

}

else{ 

// canvas 这是个什么东东？？

}

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

1

2

3

4

// 创建一个 Canvas 元素，并检查该元素是否拥有 getContext() 方法，然后用双否定强制返回一个布尔值

var hasCanvas = !!document.createElement("canvas").getContext;

// Modernizr检测方法，返回布尔值

var hasCanvas = Modernizr.canvas ;

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

1

2

3

4

5

6

7

8

// 创建一个 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;

想检测是否支持默写格式，可以这么写：

1

2

3

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 对象中，对象在页面加载时保存，并且容易获取。在打开新窗口或新标签页以及重新启动浏览器时，开发人员可以选择是否激活这些数据。存储的数据不会再网络上传输，并可以保存高达数兆字节的大数据。

1

2

3

4

// 支持的话，全局 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 对象。

1

2

3

4

// 支持的话，全局 window 对象会有一个 Worker 属性

var hasWorker = window.Worker;

// modernizr检测方法

var hasWorker = Modernizr.webworkers;

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

1

2

3

4

// 支持的话，全局 window 对象会有一个 applicationCache 属性

var hasApplicationCache = window.applicationCache;

// modernizr检测方法

var hasApplicationCache = Modernizr.applicationcache ;

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

1

2

3

4

// 支持的话，全局 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。

1

2

3

4

// 创建一个 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 通信的另一种增量加强，更代表着一次巨大的进步，对实时的、事件驱动的程序而言更是如此。

1

2

3

4

// 支持的话，全局 window 对象会有一个 webSocket 属性

var hasWebSocket = window.webSocket;

// modernizr检测方法

var hasWebSocket = Modernizr.websockets;

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

1

2

3

4

// 支持的话，全局 window 对象会有一个 postMessage 属性

var hasPostMessage = window.postMessage;

// modernizr检测方法

var hasPostMessage = Modernizr.postmessage;

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

以上就是HTML5 API浏览器支持情况检测的详情介绍的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

HTML5中在用户可以开始播放视频/音频时触发的事件oncanplay

HTML5实现图片的3d旋转效果

h5的filereader怎样分布读取文件

如何使用canvas画出平滑的曲线?（代码）

HTML5的contenteditable属性解析

怎样用h5预览pdf格式的文档

详细介绍HTML5 12个设计小技巧（图文）

HTML5拖放的实现方法

html标签伪元素绑定事件的三种方式

移动端HTML5音频与视频遇到的问题及解决方案

更多相关阅读请进入《HTML5》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...