HTML5特性检测-检测技术-H5教程-PHP中文网

HTML5特性检测-检测技术

PHP中文网

发布： 2016-05-17 09:09:53

原创

2054人浏览过

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;这一句是创建一个虚拟的

立即学习“前端免费学习笔记（深入）”；

如果不想写这个方法的话，可以使用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,被创建

兴泰网络办公系统1.61

基于 Internet 的 Web 技术，完全采用B/S 体系结构的网络办公系统。该系统具有安全性高、功能极为强大、可在广域网中使用也可在局域网中使用、也可以同时在局域网和广域网中使用的特点，全傻瓜式安装，无需作复杂配置，界面采用类似windows资源管理器的设计，结构清晰，条理分明，即使不熟悉电脑的人也可很快掌握全部操作。该系统通过在广域网内的广泛试用验证和经专业技术人员的调试、测试，确认具有很

查看详情

如果不想写这个方法的话，可以使用modernizr库提供的方法检测浏览器是否支持video API：

if(Modernizr.video){ do something}
else{ do something }

登录后复制

4、创建一个元素，给这个元素的DOM对象设定特定的属性值，然后检查浏览器是否保留了该属性值。以检测支持的类型为例。

首先创建一个虚拟的元素：var i=document.createElement_x_x("input");

元素默认为文本类型，接下来将元素的类型设置成要检测的类型： i.setAttribute("type","color");

如果浏览器支持次特定的输入框类型，那么设置的type值会被保留，反之，依然为文本类型。

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

登录后复制

以上就是HTML5特性检测-检测技术的内容，更多相关内容请关注PHP中文网（www.php.cn）！

大家都在看：

H5页面制作适合哪些应用场景 H5页面制作如何进行测试 H5页面制作的流程是怎样的 H5页面制作能做什么 H5页面制作是开发网页吗