HTML5教程

当前位置: HTML5技术网 > HTML5教程 > HTML5特性检测--检测技术

HTML5特性检测--检测技术


4种基本技术可以用于检测浏览器是否支持某种html5特性,从简单到复杂的顺序:

1、检测全局对象(window或navigator)是否拥有特定的属性。
如果浏览器支持地理位置API的话,全局的navigator对象上会有一个名为geolocation的属性,反之,navigator对象上该属性的值为undefined:
function supports_geolocation(){  
return !!navigator.geolocation;  
}  
如果不想写这个方法的话,可以使用modernizr库提供的方法检测浏览器是否支持地理位置API:
if(Modernizr.geolocation){ do something}  
else{ do something }  
2、创建一个元素,然后检测该元素的DOM对象是否拥有特定的属性。以检测画布特性为例。
function supports_canvas(){  
return !!document.createElement_x_x('canvas').getContext;  
}  
return !!document.createElement_x_x('canvas').getContext;这一句是创建一个虚拟的<canvas>元素,这个元素永远不会附加到页面上,因此对于用户来说它永远是不可见的。紧接着测试该元素是否拥有getContext()方法,这个方法只有当浏览器支持canvasAPI时才会存在,最后用双重否定!!来强制这个检测方法返回一个布尔值
如果不想写这个方法的话,可以使用modernizr库提供的方法检测浏览器是否支持canvas API:

if(Modernizr.canvas){ do something}  
else{ do something }  
 3、创建一个元素,然后检测该元素的DOM对象是否拥有特定的方法,同时调用这个方法并检查它的返回值。以检测支持视频格式为例。
function supports_video(){  
   return !!document.createElement_x_x('video').canPlayType;  
}  
如果浏览器支持HTML5 video,被创建<video>元素对应的DOM对象会有一个名为canPlayType()的方法,反之,该对象只会拥有一些所有元素都有的公共属性。
如果不想写这个方法的话,可以使用modernizr库提供的方法检测浏览器是否支持video API:
if(Modernizr.video){ do something}  
else{ do something }  
4、创建一个元素,给这个元素的DOM对象设定特定的属性值,然后检查浏览器是否保留了该属性值。以检测支持的<input>类型为例。
首先创建一个虚拟的<input>元素:var i=document.createElement_x_x("input");
<input>元素默认为文本类型,接下来将元素的类型设置成要检测的类型: i.setAttribute("type","color");
如果浏览器支持次特定的输入框类型,那么设置的type值会被保留,反之,依然为文本类型。

return i.type!=="text";  
if(!Modernizr.inputtypes.date){  
   //浏览器有没有提供,type="date">原生支持  

【HTML5特性检测--检测技术】相关文章

1. HTML5特性检测--检测技术

2. 加入HTML5特性的移动网站可大幅提高访问量

3. 360极速浏览器支持HTML5特性的网络摄像头

4. Google Chrome Beta版更新带来另一个HTML5特性

5. 360极速浏览器5.5正式版发布 全面支持HTML5特性

6. 细数IE10里的HTML5特性

7. 检测浏览器支持哪些HTML5新特性的方法

8. 你必须知道的28个HTML5特征、窍门和技术

9. 360安全桌面更新,全面支持HTML5特效

10. HTML 5特效页面及js测试页面汇总推荐

本文来源:https://www.51html5.com/a544.html

点击展开全部

﹝HTML5特性检测--检测技术﹞相关内容

「HTML5特性检测--检测技术」相关专题

其它栏目

也许您还喜欢