跳转到主内容
新派编程网 - 新潮编程理念,全新技术课堂!

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;这一句是创建一个虚拟的 元素,这个元素永远不会附加到页面上,因此对于用户来说它永远是不可见的。紧接着测试该元素是否拥有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,被创建

相关文章