HTML5 API 浏览器支持情况检测

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 进行详细讲解,把自己学到和研究的东西共享出来,欢迎大家来一块交流学习:)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

2 thoughts on “HTML5 API 浏览器支持情况检测