验证 html5 特性,HTML5特性检测–检测技术

摘要:4种基本技术可以用于检测浏览器是否支持某种html5特性,从简单到复杂的顺序: 1、检测全局对象(window或navigator)是否拥有特定的属性。 如果浏览器支持地理位置API的话,全局的nav…

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

1、检测全局对象(window或navigator)是否拥有特定的属性。

如果浏览器支持地理位置API的话,全局的navigator对象上会有一个名为geolocation的属性,反之,navigator对象上该属性的值为undefined:

如果不想写这个方法的话,可以使用modernizr库提供的方法检测浏览器是否支持地理位置API:

2、创建一个元素,然后检测该元素的DOM对象是否拥有特定的属性。以检测画布特性为例。

return !!document.createElement_x_x('canvas').getContext;这一句是创建一个虚拟的元素,这个元素永远不会附加到页面上,因此对于用户来说它永远是不可见的。紧接着测试该元素是否拥有getContext()方法,这个方法只有当浏览器支持canvasAPI时才会存在,最后用双重否定!!来强制这个检测方法返回一个布尔值

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

3、创建一个元素,然后检测该元素的DOM对象是否拥有特定的方法,同时调用这个方法并检查它的返回值。以检测支持视频格式为例。

如果浏览器支持HTML5 video,被创建元素对应的DOM对象会有一个名为canPlayType()的方法,反之,该对象只会拥有一些所有元素都有的公共属性。

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

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

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

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值