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