有四种技术可以用于检测浏览器是否支持某种HTML5特性:
1.检测全局对象是否拥有特定的属性
以检测地理位置为例:
function supports_geolocation(){
return !!navigator.geolocation;//如果浏览器支持地理位置API的话,全局的navigator上一定会有一个geolocation属性,反之对象上该属性为undefined。对于js中的!!:若navigator.geolocation为undefined,那么,!为true,!!为false
}
//或者用Modernizr(Moderniz是一个开源的JavaScript类库,用于检测浏览器是否支持HTML5及CSS3特性)
if(Modernizr.geolocation){
alert("yes Modernizr.geolocation");
}else{
alert("no Modernizr.geolocation");
}
2.创建一个元素,然后检测该元素的DOM对象是否拥有特定的属性
以检测画布canvas为例
//2.1此方法用于检测浏览器是否支持canvas API,那么,浏览器是否支持canvas 文本 API呢?,请看2.2
function supports_canvas(){
return !!document.createElement("canvas").getContext;
}
//或者用Moderniz
if(Modernizr.canvas){
alert("yes canvas");
}else{
alert("no canvas");
}
//2.2.检测浏览器是否支持canvas 文本 API
function supports_canvas_text(){
if(!supports_canvas()){
return false;
}
var canvasEle=document.createElement("canvas");
var context=canvasEle.getContext("2d");
return typeof context.fillText == "function";
}
//或者用Modernizr
if(Modernizr.canvastext){
alert("yes text canvas");
}else{
alert("notext canvas");
3.创建一个元素,然后检测这个元素的DOM对象是否拥有特定的方法
以video为例
//3.1检测浏览器是否支持视频
function supports_video(){
return !!document.createElement("video").canPlayType;
}
if(Modernizr.video){
alert("yes video");
}else{
alert("no video");
}
//3.2检测浏览器具体支持哪种视频格式(有两种视频格式算法:H264,Ogg)
//Safari和iPhone的H264
function support_h264_baseline_video(){
if(!supports_video()){
return false;
}
var ele=document.createElement("video");
return ele.canPlayType("video/mp4; codecs='avc1.42E01E,mp4a.40.2'");
}
//chrome和firefox的Ogg
function supports_ogg_theora_video(){
if(!supports_video()){
return false;
}
var ele=document.createElement("video");
return ele.canPlayType("video/ogg; codecs='theora,vorbis'");
}
//WebM格式(是一种新的开源视频编码格式,并会在Chrome,Firefox和Opera这些主流浏览器的下一个版本得到广泛支持,未来可能广泛应用的)
function supports_webm_video(){
if(!supports_video()){
return false;
}
var ele=document.createElement("video");
return ele.canPlayType("video/webm;codecs='vp8,vorbis'");
}
4.创建一个元素,给这个元素的DOM对象设定特定的属性值(即key=value),然后检测浏览器是否保留了该属性值
以HTML5新增input类型为例(注意:HTML5中新提供了13中类型input,由于 ele.setAttribute("type","color");,若自己写判断方法的话,就得写13个,故采用Modernizr的方法(但是也得写13个判断,因为要需要什么便来判断什么,因为Modernizr.inputtypes是所有input控件的统称,故必然返回true,具体分辨不了。故要对症下药)
function supports_inputColor(){
var ele=document.createElement("input");
ele.setAttribute("type","color");
return ele.type!=="text";
}
//或者
if(!Modernizr.inputtypes.date){//指的是不支持
alert("no input date");
//自己构建一个类似的控件
}else{
alert("yes input date");
}
HTML5检测其他特性的常用实例(下面实例也属于上面四种检测方法中的一种):
/*检测是否支持本地存储*/
function supports_local_storage(){
return ("localStorage" in window)&&window["localStorage"]!==null;
}
//或者
if(Modernizr.localstorage){
alert("yes localstorage");
}else{
alert("no localstorage");
}
/*检测浏览器是否支持Web Workers*/
function support_web_workers(){
return !!window.Worker;
}
if(Modernizr.webworkers){
alert("yes webworkers");
}else{
alert("no webworkers");
}
/*检测浏览器是否支持离线Web应用*/
function support_offline(){
return !!window.applicationCache;
}
//或者
if(Modernizr.applicationcache){
alert("yes applicationcache");
}
else{
alert("no applicationcache");
}
/*检测是否支持占位文本*/
function supports_placeholder(){
var ele=document.createElement("input");
return "placeholder" in ele;
}
//或者
if(Modernizr.input.placeholder){
alert("yes Modernizr.input.placeholder");
}else{
alert("no Modernizr.input.placeholder");
}
/*检测浏览器是否支持自动聚焦*/
function supports_input_autofocus(){
var ele=document.createElement("input");
return "autofocus" in ele;
}
//or
if(Modernizr.input.autofocus){
alert("yes Modernizr.input.autofocus");
}else{
alert("no Modernizr.input.autofocus");
}
/*检测浏览器是否支持微数据 注意:Modernizr目前还不支持检测微数据AIP,故只能自己写相应的检测方法*/
function supports_microdata_api(){
return !!document.getItems;
}