HTML5特性检測

浏览数：70 / 时间：2015年06月09日

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特性检測