WEB(五)_Modernizr.js检测浏览器HTML5新增特性的支持
2015-03-27 00:00
253 查看
摘要: 有一部分浏览器对HTML5的支持不够理想,对于不支持HTML5的浏览器JS将无法获得DOM对象,需要if-else要兼容
首先Modernizr.js插件,它能简单的帮助开发者向浏览器询问是否支持HTML5标签
通过上面的调用就可以正常使用了,下面我们来试试吧,其中会用原生js写法和插件写法,自己判别那种适合自己吧
1.canvas
2.video
3.本地存储localStorage
4.人工线程(后台线程)Web Worker
5.离线Web应用(针对移动应用居多)Applicationcache
6.地理位置geolocation
以上就是HTML5新特性的判定了!
作者:五谷子(wuguzi)
首先Modernizr.js插件,它能简单的帮助开发者向浏览器询问是否支持HTML5标签
<head> <script src="modernizr.js"></script> </head>
通过上面的调用就可以正常使用了,下面我们来试试吧,其中会用原生js写法和插件写法,自己判别那种适合自己吧
1.canvas
//插件写法 if(Moderniz.canvas){ alert("浏览器支持Canvas标签"); }else{ alert("浏览器不支持Canvas标签") }
//原生写法 function isCanvas(){ return !!document.createElement('canvas').getContext;//双重!!(否定)用于强制这个检测方法返回一个布尔值 }
2.video
//插件写法 if(Moderniz.video){ alert("浏览器支持video标签"); }else{ alert("浏览器不支持video标签") }
//原生写法 function isVideo(){ return !!document.createElement('video').getContext;//双重!!(否定)用于强制这个检测方法返回一个布尔值 }
3.本地存储localStorage
//插件写法 if(Moderniz.localstorage){//注意小写 alert("浏览器localStorage支持"); }else{ alert("浏览器不支持localstorage"); }
//原生写法 function isLocalStorage(){ return ('localStorage' in window) && window['localStorage']!=null; }
4.人工线程(后台线程)Web Worker
//插件写法 if(Moderniz.webworkers){//注意小写 alert("浏览器workers支持"); }else{ alert("浏览器不支持workers"); }
//原生写法 function isWorker(){ return !!window.Worker;//双重!!(否定)用于强制这个检测方法返回一个布尔值 }
5.离线Web应用(针对移动应用居多)Applicationcache
//插件写法 if(Moderniz.applicationcache){//注意小写 alert("浏览器applicationcache支持"); }else{ alert("浏览器不支持applicationcache"); //可以尝试使用Gears或者其他第三方解决方案! }
//原生写法 function isApplicationCache(){ return !!window.applicationCache;//双重!!(否定)用于强制这个检测方法返回一个布尔值 }
6.地理位置geolocation
//插件写法 if(Moderniz.geolocaltion){//注意小写 alert("浏览器geolocaltion支持"); }else{ alert("浏览器不支持geolocaltion"); //可以尝试使用geolocaltion或者其他第三方解决方案! }
//原生写法 function isGeolocaltion(){ return !!navigator.geolocaltion;//双重!!(否定)用于强制这个检测方法返回一个布尔值 }
以上就是HTML5新特性的判定了!
作者:五谷子(wuguzi)
相关文章推荐
- 关于html5支持与否的判断(JS检测是否支持HTML5新特性)
- html5 新特性支持的浏览器检测
- Android 4.4 WebView重大改动:由Chromium驱动 支持HTML5和CSS新特性
- html5 检测浏览器是否支持新特性
- 用 webpack 构建 node 后端代码,使其支持 js 新特性并实现热重载
- HTML5特性 > 本地储存 >检测是否支持本地存储(Local Storage,sessionStorage)
- HTML5系列四(特征检测、Modernizr.js的相关介绍)
- android studio 将HTML5封装成APK && 设置WebView支持js的Alert,Confirm,Prompt函数的弹出提示框.
- HTML5 - 用Modernizr检测浏览器对表单和表单验证的支持情况
- 使用Modernizr 检测HTML5和CSS3浏览器支持功能
- js 页面检测是否支持html5 如果不支持页面提示
- 使用js检测浏览器是否支持html5中的video标签的方法
- [转]使用Modernizr 检测HTML5和CSS3浏览器支持功能
- 检测浏览器支持哪些HTML5新特性的方法
- 使用Modernizr 检测HTML5和CSS3浏览器支持功能 (转自http://www.adobe.com/cn/devnet/dreamweaver/articles/using-modernizr.html)
- 检测浏览器是否支持HTML5/CSS3神器Modernizr
- Web——HTML5特性检测
- Modernizr.js入门指南,检查浏览器对Html5和Css3的语法支持
- HTML5 - 判断浏览器是否支持html5某个功能(使用modernizr.js)
- 使用js检测浏览器是否支持html5中的video标签的方法