文档章节

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和CSS3开发工具资源汇总

HTML5和CSS3已经开始彻底变革全世界的Web前端开发和Web设计发展格局,因为他们给这个领域带来了太多太多令人惊奇的新特性!我用大量时间学习了HTML5和CSS3技术,它们的动画、圆角等特效会令你...

晨曦之光
2012/03/09
0
0
HTML5编程之旅 第4站 Forms

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

倪伟伟
2014/02/27
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

dubbo部分常见的面试题目

1、什么是AMQP协议? AMQP的全称是 Advanced Message Queuing Protocol (高级消息队列协议) 他是应用层协议的一个开放的标准,为面向消息中间件而设计,基于此协议的客户端和消息中间件可以...

DemonsI
11分钟前
0
0
http和https协议

HTTPS全称为Hypertext Transfer Protocol over Secure Socket Layer,中文含义为“超文本传输协议在安全加密字层”,简单来说就是加密数据传输,通俗的说就是安全连接。 HTTPS安全超文本传输...

寰宇01
12分钟前
0
0
vue内引入语音播报功能

在vue项目中引入语音播报,使用的科大讯飞语音接入, 具体思路为每次接收到语音信息后存入一个数组,然后监听这个数组,开始冲第一个索引播放,并且同时根据vuex getter 来动态删减数量 给a...

originDu
20分钟前
0
0
Java创建对象的五种方式

一、使用new关键字,调用构造方法创建对象 Person p1 = new Person(); 运行过程: 1、给新对象分配内存空间,将数据存储到堆。 2、执行显示的初始化。 3、执行构造器。new方法中括号参数传递...

Drathin
21分钟前
0
0
git使用纪要

之前公司一直没用git,于是自己注册了一个账号自己用,因为也没人合作,所以也没太关注协作方面的事情。最近公司终于想通了,开始用git,于是研究了一下,在此做个记录。 git功能非常灵活,因...

propagator
26分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部