HTML5特性检測
HTML5特性检測：
1.检測全局对象：诸如window或navigator是否拥有特定的属性
2.创建元素：检測该元素的DOM对象是否拥有特定的属性
3.创建元素：检測该元素的DOM对象是否拥有特定的方法
4.创建元素：赋予该元素的DOM对象设定的属性值，检測浏览器
是否保留该属性值
Modernizr：HTML5特性检測库，用于检測浏览器是否支持HTML5
和CSS3特性.下载Development版http://www.modernizr.com/
eg.
Ⅰ.检測浏览器是否支持canvas API
1. html5特性检測2：
<html>
<head>
<title>Dive into HTML5</title></head>
<body>
<script>
function supports_canvas() {
return !!document.createElement('canvas').getContext;}
alert(supports_canvas());
</script></body></html>
2.使用modernizr库提供的方法检測
<html><head><meta charset="utf-8">
<title>Dive into HTML5</title>
<script src="modernizr.custom.57110.js" ></script>
</head><body><script>
if (Modernizr.canvas) {
alert("OK"); } // let's draw some shapes!
else {
alert("no");} // no native canvas support available
</script></body></html>
Ⅱ.检測浏览器是否支持HTML5 viedo
1.使用HTML5特性检測2
function supports_video(){
return !!document.CreateElement(“video”).canPlayType;}
2.使用modernizr库提供的方法检測
if(modernizr.video){
let's play some video!}
else{
// no native video support available
// maybe check for QuickTime or Flash instead }
Ⅲ.检測浏览器是否支持某种视频格式
一．检測MPEG-4容器里的h.264编码格式的视频和AACLC格式的音频(mac和Iphone支持)
1.使用HTML5检測特性3
function supports_h264_baseline_video(){
if(!supports_video()){return false;}
var v=document.createElement(“video”);
return v.canPlayType(‘video/mp4;codecs=”avc1.42E01E,mp4a.40.2”’);}
canPlayType()方法返回一个字符串：
“probably”表示浏览器有充分把握能够播放此格式
“maybe”表示浏览器可能播放此格式
“”(空字符串)表示浏览器无法播放此格式
二．检測Ogg容器内Theora编码格式的视频和Vorbis编码格式的音频(Mozilla Firefox等开源浏览器支持)
1.使用HTML5检測特性3
function supports_ogg_theora_video(){
if(!supports_video()){return false;}
var v=document.createElement(“video”);
return v.canPlayType(‘video/ogg;codecs=”theora,vorbis”’);}
三．检測 Matroska容器内webM视频编码格式和Vorbis编码格式的音频
1.使用HTML5检測特性3
function supports_webm_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/webm; codecs="vp8, vorbis"');
使用modernizr库提供的方法检測浏览器是否支持各种HTML5格式
if (Modernizr.video) {
// let's play some video! but what kind?
if (Modernizr.video.ogg) {
// try Ogg Theora + Vorbis in an Ogg container
} else if (Modernizr.video.h264){// try H.264 video + AAC audio in an MP4 container
}}
Ⅳ.检測浏览器是否支持本地存储。
1.检測方法1
function supports_local_storage() {
return ('localStorage' in window) && window['localStorage'] !== null;
}
2.使用modernizr库
if (Modernizr.localstorage) {
// window.localStorage is available!}
else {
// no native support for local storage :(
// maybe try Gears or another third-party solution
}
Ⅴ.检測浏览器是否支持Web Workers。
1.检測方法1
function supports_web_workers() {
return !!window.Worker;
}
2.使用modernizr库
if (Modernizr.webworkers) {
// window.Worker is available!
} else {
// no native support for web workers :(
// maybe try Gears or another third-party solution
}
Ⅵ.检測浏览器是否支持离线web应用（Offline Web Applications）
1.检測方法1
function supports_offline() {
return !!window.applicationCache;
}
2.使用modernizr库
if (Modernizr.applicationcache) {
// window.applicationCache is available!
} else {
// no native support for offline :(
// maybe try Gears or another third-party solution
}
Ⅶ.检測浏览器是否支持地理位置应用
1.检測方法1
function supports_geolocation() {
return !!navigator.geolocation;
}
2.使用modernizr库
if (Modernizr.geolocation) {
// let's find out where you are!
} else {
// no native geolocation support available :(
// maybe try Gears or another third-party solution
}
Ⅷ。检測浏览器是否支持输入框类型
1.检測方法4
function supports_inputtypes{
var i = document.createElement("input");
i.setAttribute("type", "color");
return i.type !== "text";
}
2.使用modernizr库
if (!Modernizr.inputtypes.date) {
// no native support for <input type="date"> :(
// maybe build one yourself with
// Dojo
// or jQueryUI
}
Ⅸ.检測浏览器是否支持站位文本（Placeholder Text）
1.检測方法2
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
2.使用modernizr库
if (Modernizr.input.placeholder) {
// your placeholder text should already be visible!
} else {
// no placeholder support :(
// fall back to a scripted solution
}
Ⅹ。检測浏览器是否支持自己主动聚焦
1.检測方法2
function supports_input_autofocus() {
var i = document.createElement('input');
return 'autofocus' in i;
}
2.使用modernizr库
if (Modernizr.input.autofocus) {
// autofocus works!
} else {
// no autofocus support :(
// fall back to a scripted solution
}
Ⅺ。检測浏览器是否支持HTML5微数据API
1.检測方法1
function supports_microdata_api() {
return !!document.getItems;
}
HTML5特性检測的更多相关文章
- 浏览器对HTML5特性检測工具Modernizr
近期在做公司移动端运营的项目,需求中多处地方都会涉及动画. 相信非常多前端开发都会有这样的感触,对CSS3中的动画属性非常熟悉,可是因为对动画运动过程的理解不深入,经常仅仅能望而止步.CSS3中动画这 ...
- C++内存泄露检測原理
转自:http://hi.baidu.com/jasonlyy/item/9ca0cecf2c8f113a99b4981c 本文针对 linux 下的 C++ 程序的内存泄漏的检測方法及事实上现进行探 ...
- 使用nodeitk进行角点检測
前言 东莞,晴,33至27度.今天天气真好,学生陆续离开学校.忙完学生答辩事情,最终能够更新一下nodeitk.本文继续介绍node的特征识别相关内容,你会看到,採用nodeitk实现角点检測是一件十 ...
- Canny边缘检測算法原理及其VC实现具体解释(一)
图象的边缘是指图象局部区域亮度变化显著的部分,该区域的灰度剖面一般能够看作是一个阶跃,既从一个灰度值在非常小的缓冲区域内急剧变化到还有一个灰度相差较大的灰度值.图象的边缘部分集中了图象的大部分信息,图 ...
- Android内存泄漏检測与MAT使用
公司相关项目须要进行内存优化.所以整理了一些分析内存泄漏的知识以及工作分析过程. 本文中不会刻意的编写一个内存泄漏的程序,然后利用工具去分析它.而是通过介绍相关概念,来分析怎样寻找内存泄漏.并附上自己 ...
- 背景建模或前景检測之PBAS
申明,本文非笔者原创,原文转载自:http://blog.csdn.net/kcust/article/details/9931575 Pixel-Based Adaptive Segmenter(P ...
- 图像边缘检測--OpenCV之cvCanny函数
图像边缘检測--OpenCV之cvCanny函数 分类: C/C++ void cvCanny( const CvArr* image, CvArr* edges, double threshold1 ...
- 检測磁盘驱动的健康程度SMART
在server中,全部组件中一般最easy坏掉的就是磁盘.所以一般採取RAID来保证系统的稳定性,通过冗余磁盘的方式防止磁盘故障. 现代硬件驱动器一般支持SMART(自我监測分析和报告技术),它可以监 ...
- OpenCV图像处理篇之边缘检測算子
3种边缘检測算子 灰度或结构等信息的突变位置是图像的边缘,图像的边缘有幅度和方向属性.沿边缘方向像素变化缓慢,垂直边缘方向像素变化剧烈.因此,边缘上的变化能通过梯度计算出来. 一阶导数的梯度算子 对于 ...
随机推荐
- C++学习之路—继承与派生（四）拓展与总结
(根据<C++程序设计>(谭浩强)整理,整理者:华科小涛,@http://www.cnblogs.com/hust-ghtao转载请注明) 1 拓展部分 本节主要由两部分内容组成,分 ...
- 党建凯，创新工场知乎团队Web前端工程师
Nicholas C. Zakas谈怎样才能成为优秀的前端工程师: 昨天,我负责了Yahoo!公司组织的一次面试活动,感触颇深的是其中的应聘者提问环节.我得说自己对应聘者们提出的大多数问题都相当失望. ...
- iPhone App开发实战手册学习笔记（9）之设计IOS App的目标
1 前言 如果我们要做一个属于自己的App需要达到那些目标呢,今天就来介绍一下. 2 详述 2.1 关注用户及其需求 你的主要目标永远都是在设计方案之前先想好用户用例.有些开发人员喜欢编写用户故事来确 ...
- 怎样改动Myeclipse10.7的Servlet模板
(1)在myeclipse10.0曾经的版本号中咱庄文件夹仅仅有叶仅仅需找到plugins在文件夹下找到: com.genuitec.eclipse.wizards_9.0.0.me201211011 ...
- Ural 1073 Square Country （DP）
题目地址:Ural 1073 DP水题.也能够说是背包. #include <iostream> #include <cstdio> #include <string&g ...
- 【OpenMesh】Some basic operations: Flipping and collapsing edges
这一节中你将学到一些OpenMesh中早已提供的基础操作. 内容包括三角形网格边的翻转以及通过连接邻接的顶点边缘折叠. 三角形网格的翻转(Flipping edges) 考虑到两个邻接面的三角形网格中 ...
- Delphi/C#之父首次访华：55岁了 每天都写代码
Delphi.C#之父Anders Hejlsberg 近日首次访华,并在10月24日和27日参加了两场见面会,分享了他目前领导开发的TypeScript项目,并与国内前端开发者近距离交流.本文就为读 ...
- spring mvc 提交数组等复杂类型
使用jquery提交,比如monthIncome的值是一个数组,在Java里用request.getParameterValues("monthIncome");取不到值,要这样才 ...
- MySQL如何修改root密码
MySQL修改用户密码 因为长期不登录MySQL数据库,登录时经常忘记root权限密码.本文提供一个在数据库服务器上修改root密码的方法,本文撰写基础是在xp操作系统下进行. 第一步 ...
- js错误 SyntaxError: missing : after property id
在用jquery的post方法时 $.post('adminCheckTpmisPlans.do',{'test',str},function(f){ ... }) 报如下错误 SyntaxError ...