文档章节

WEB(五)_​Modernizr.js检测浏览器HTML5新增特性的支持

五谷子
 五谷子
发布于 2015/03/27 11:59
字数 554
阅读 22
收藏 0

首先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)

© 著作权归作者所有

共有 人打赏支持
五谷子
粉丝 4
博文 25
码字总数 5385
作品 0
海淀
程序员
私信 提问
Modernizr:HTML5和CSS3的开发利器

随着HTML5和CSS3的飞速发展,越来越多语义化的标签和炫酷的特性被应用到web应用开发中来,各大浏览器厂商纷纷开始支持这些新特性,web开发人员也都兴趣十足地试用这些新特性开发出更绚丽有趣...

BryanYang
2014/02/24
0
0
从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
07/24
0
0
移动App开发工具和移动应用漏洞检测工具

  移动应用开发工具和移动应用漏洞检测工具,另外,HTML5提供了很多易于移动web开发的特性。例如,所有的网站都是开发放式的,不需要授权;开发者所创造的利润全部归自己所有。无疑,HTML5...

科技创造
2014/09/13
0
1
扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂
06/01
0
0
HTML5编程之旅 第4站 Forms

涉及到Web开发的,肯定要涉及到HTML表单,本节将带你走入HTML5表单的世界。 一、HTML5 Forms概述 熟悉HTML表单的开发人士,可以很容易的适应HTML5 Forms的新增功能。 XFomrs是一个以XML为核心...

倪伟伟
2014/02/27
0
1

没有更多内容

加载失败,请刷新页面

加载更多

Vue重要知识小结

vue sync修饰 (1)双向数据绑定,父子组件之间信息的交互 1⃣️在自组件中使用this.emmit('toFather'),子组件产生一个tofather事件,然后在父组件中通过@进行监听,那么可以实现通信过程 2⃣...

peakedness丶
36分钟前
1
0
1024我们的码农节-向自己致敬!

一、blog主有话要说 作为(真正)入赘程序届的第一年, 对明天的1024码农节有很多话想说.比如: 给各位辛苦大佬们讲几个咱们程序届段子 给自己立一个flag, 明年的1024争取少掉点甚至不掉头发! ...

Ala6
38分钟前
10
0
solr使用规范

0. 目的 规范solr设计、用法,避免bug,提高性能 1. 设计规范 solr的用途是查询,不是存储,建议查询结果尽量都为id主键,而后再拿该id主键到缓存或者db中再查询相关信息,例如:请勿将经销商...

andersChow
50分钟前
1
0
11-《深度拆解JVM》之Java对象的内存布局

一、问题引入 在 Java 程序中,我们拥有多种新建对象的方式。除了最为常见的 new 语句之外,我们还可以通过反射机制、Object.clone 方法、反序列化以及 Unsafe.allocateInstance 方法来新建对...

飞鱼说编程
55分钟前
1
0
Windows Install Docker

win7、win8 win7、win8 等需要利用 docker toolbox 来安装,国内可以使用阿里云的镜像来下载,下载地址:http://mirrors.aliyun.com/docker-toolbox/windows/docker-toolbox/ docker toolbox...

linuxprobe16
59分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部