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;
}
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;
}
