easy html5 - HTML5特性检测

分享到

作者：weibo.com/yospace ，发布于2012-9-13,来源：博客园

简介

做web前段开发人员已经习惯了处理多浏览器兼容(如IE、firefox、chrome)、多浏览器版本兼容(Ie6、ie7、ie8、ie9)，我们需呀从js和css上考虑让它如何兼容，如何一致；HTML5也一样，只是它更广泛的被浏览器开发商接受并兼容，而且效果良好；但是这里仍旧有一个问题，就是“有些老的浏览器不支持” :(；你把html5用的炉火纯青，忽然来个ie6用户；所以我们需要对浏览器对html5的支持做一定的检测，从而给用户以有好提示；

怎么检测

当浏览器在渲染web页面的时候会构造一个文档对象模型(DOM)，通过它来表示页面上的HTML元素，任何一个tag都会被表示为一个对象；当然也有windwos和document这些不和特定页面元素绑定在一起的全局对象；

所有的dom对象都共享一些属性，但是有些对象会拥有特定的属性。在支持HTML5特性的浏览器中，特性相关的dom对象就会有特定的属性。通过这些特定的属性，我们可以快速的检测出那些html5特性是被支持的。比如常见的四种方法：

1.检测全局对象(如window,navigator)是否拥有特定的属性。比如检测地理位置特性

2.创建一个元素，然后检测该元素的dom对象是否拥有特定的属性。比如检测画布特性

3.创建一个元素，然后检测这个元素dom对象是否拥有特定的方法，调用这个方法，并检测返回值。比如检测支持的视频格式

4.创建一个元素，给这个元素的dom对象设定特定的属性值，然后检测浏览器是否保留了该属性值

检测插件(Modernizr)

Moderniz是一个开源的js类库，用于检测浏览器是否支持html5及css3特性；在页面引用后，会创建对应的全局对象，并开放对应特性是否支持的属性，我们可以直接进行访问对应属性，就可以知道是否支持某特性了.

画布(canvas)

在网页中canvas就是一块矩形区域，在这个区域里，我们可以画任何内容，html5标准中定义了一系列的canvas的api，用于绘制简单图形、定义路径、创建渐变、应用图像变换等。

检测canvas api，可以通过创建canvas元素，判断其dom对象是否有getContext()方法；

        //Canvas
        function supportCanvas() {
            return !!document.createElement("canvas").getContext;
        }

Modernizr.canvas

画布文本(Canvas Text)

浏览器支持canvas api但不一定支持canvas text api，因为canvas api一直都在不断完善中，cavas text(绘制文本)后来才被纳入规范；既然如此，支持canvas text api必须要支持canvas api(见上)，如果李兰奇支持canvas api，那么在获得canvas绘图上下文后，可以判断是否有filltext方法，如果存在这个方法，则可以断定浏览器支持canvas text api.

//Canvas Text
        function supportCanvasText() {
            if (!supportCanvas) {
                return false;
            }
            var canvas = document.createElement("canvas");
            //获取绘图上下文
            var context = canvas.getContext("2d"); 

            //是否有fillText方法
            return typeof context.fillText == "function";
        }

Modernizr.canvastext

视频(Video)

html5标准中定义了一个新元素video，用来将视频签入到web页面中；之前如果想再web页面中嵌入视频，只能使用apple的quick time或者adobe flash播放器这些插件；video元素的可用性不需要任何脚本检测；我们可以为它指定多个视频格式的文件来进行播放，不支持html5 video的浏览器会忽略video标签，在这种情况下我们可以指定用第三方插件来播放视频，当然这只是处理web页面视频的最好解决方案；如果你的确要做检测，当然是可以的。和canvas类似，创建一个video节点，判断dom对象是否有某个属性，这里使用canPlayType

//test video
    function testVideo() {
        var isSupport = supportVideo();
        alert(isSupport ? "support video" : "do not support video");
        //alert(Modernizr.video ? "support video" : "do not support video");
    }

Modernizr.video

视频格式(Video Formats)

视频编码算法迥异，所以目前各浏览器还未达成一致，使用统一的视频编码算法；但是好在这种算法已经缩减到两周算法上：一种是safari和iphone的编码算法；另一种是诸如chrome和mozilla firefox这类开源浏览器的编码算法；所以做视频格式支持检测，要分别判断这两种；还有一种WebM，它是一种新的开源视频编码格式，会在Chrome，firefox和opera的下一个版本的到支持，所以我们也检测咯；

要检测浏览器是否支持某视频格式，当然必须支持video；先创建video节点，然后调用dom对象的canPlayType()方法，但是这个方法返回的不是一个bool值，因为视频格式非常复杂，所以这个方法会返回一个字符串，分别为：

probably:表示浏览器充分把握可以播放此格式

maybe：表示浏览器有可能可以播放此格式

“”(空字符串)：表示浏览器无法播放此格式

mp4:

//mp4
        function support_h264BaseLine_VideoFormats() {
            if (!supportVideo()) {
                return false;
            }
            var v = document.createElement("video");
            return v.canPlayType("video/mp4;codecs='avc1.42E01E,mp4a.40.2'")
        }

Modernizr.video.h264

ogg:

//ogg
        function support_ogg_theora_VideoFromats() {
            if (!supportVideo()) {
                return false;
            }
            var v = document.createElement("video");
            return v.canPlayType("video/ogg;codecs='theora,vorbis'")
        }

Modernizr.video.ogg

web M:

//web m
        function support_webM_VideoFromats() {
            if (!supportVideo()) {
                return false;
            }
            var v = document.createElement("video");
            return v.canPlayType("video/webm;codecs='vp8,vorbis'")
        }

本地存储(Local Storage)

HTML5本地存储允许网站把信息存储到本地的计算机上，以便在需要时获取。这和cookie类似，但cookie是有大小先知道的，而且每次请求一个新页面时，cookie就会被发送回服务器；而html5本地存储将信息存储到用户计算机上，网站可以再页面加载完成后通过js获取；检测浏览器是否支持本地存储可以通过判断window对象是否有localStorage属性

      //Local Storage
        function supportLocalStorage() {
            return ('localStorage' in window) && window['localStorage'] != null;
        }

Modernizr.localstorage

Web Workers

Web Workers提供了一种标准的方式让浏览器能够在后台运行js，通过web worker，可以创建多个“线程”并让他们同时执行；

       //web workers
        function supportWebWorkers() {
            return window.Worker;
        }

Modernizr.webworkers

离线web应用

html5支持离线web应用，即断开网络后可以继续访问web应用程序；在第一次访问具备离线访问的web应用时，web服务器会告诉浏览器哪些文件是保证离线正常工作必须得，一旦浏览器下载了这些必须文件，下次就可以在没有网络的情况下正常使用应用；等下次用户重新上线的时候，所有改动都会上传到远程的web服务器；检测浏览器是否支持离线应用，可以通过判断window对象是否有applicationCache属性；

       //offline
        function supportOffLine() {
            return !!window.applicationCache;
        }

Modernizr.applicationcache

地理位置(Geolocation)

浏览器在实现对html5新特性支持的同时，也纷纷加入了对地理位置特性的支持。严格的说，地理位置特性并不属于html5标准的一部分，它由地理位置工作组(Geolocation Working Group)负责制定标准，这个工作组和html5工作组没关系；地理位置api的使用场景非常广泛，尤其在移动设备上；检测浏览器是否支持地理位置api，可以判断navigator是否有geolocation属性.

       //geolocation
        function supportGeolocation() {
            return !!navigator.geolocation;
        }

Modernizr.geolocation

Code

View Code 

<!DOCTYPE html> 
<head>
    <title></title>
    <script src="modernizr-2.5.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        //Canvas
        function supportCanvas() {
            return !!document.createElement("canvas").getContext;
        }

        //Canvas Text
        function supportCanvasText() {
            if (!supportCanvas) {
                return false;
            }
            var canvas = document.createElement("canvas");
            //获取绘图上下文
            var context = canvas.getContext("2d"); 

            //是否有fillText方法
            return typeof context.fillText == "function";
        }

        //Video
        function supportVideo() {
            return !!document.createElement("video").canPlayType;
        }

        //video formats h264 
        //mp4
        function support_h264BaseLine_VideoFormats() {
            if (!supportVideo()) {
                return false;
            }
            var v = document.createElement("video");
            return v.canPlayType("video/mp4;codecs='avc1.42E01E,mp4a.40.2'")
        }
        //ogg
        function support_ogg_theora_VideoFromats() {
            if (!supportVideo()) {
                return false;
            }
            var v = document.createElement("video");
            return v.canPlayType("video/ogg;codecs='theora,vorbis'")
        }
        //web m
        function support_webM_VideoFromats() {
            if (!supportVideo()) {
                return false;
            }
            var v = document.createElement("video");
            return v.canPlayType("video/webm;codecs='vp8,vorbis'")
        }

        //Local Storage
        function supportLocalStorage() {
            return ('localStorage' in window) && window['localStorage'] != null;
        }

        //web workers
        function supportWebWorkers() {
            return window.Worker;
        }

        //offline
        function supportOffLine() {
            return !!window.applicationCache;
        }

        //geolocation
        function supportGeolocation() {
            return !!navigator.geolocation;
        }

    </script>
</head>
<body>
    <button onclick="testCanvas()">Test Canvas</button><br />
    <button onclick="testCanvasText()">Test Canvas Text</button><br />
    <button onclick="testVideo()">Test Video</button><br />
    <button onclick="testVideoFormats()">Test Video Format</button><br />
    <button onclick="testLocalStorage()">Test Local Storage</button><br />
    <button onclick="testWebWorkers()">Test Web Workers</button><br />
    <button onclick="testOffLine()">Test Offline app</button><br />
    <button onclick="testGeolocation()">Test geolocation</button><br />
</body>
</html>
<script type="text/javascript">
    
    //test canvas
    function testCanvas() 
    {
        var isSupport = supportCanvas();
        alert(isSupport ? "support canvas" : "do not support canvas");
        //alert(Modernizr.canvas ? "support canvas" : "do not support canvas");
    }

    //test canvastext
    function testCanvasText() {
        var isSupport = supportCanvasText();
        //alert(isSupport ? "support canvas text" : "do not support canvas text");
        alert(Modernizr.canvastext ? "support canvas text" : "do not support canvas text");
    }
    
    //test video
    function testVideo() {
        var isSupport = supportVideo();
        alert(isSupport ? "support video" : "do not support video");
        //alert(Modernizr.video ? "support video" : "do not support video");
    }

    //test video formats
    function testVideoFormats() {
        //mp4 test
        var isSupport = support_h264BaseLine_VideoFormats();
        alert(isSupport ? "support mp4 video " : "do not support mp4 video");

        //ogg test
        isSupport = support_ogg_theora_VideoFromats();
        alert(isSupport ? "support ogg video " : "do not support ogg video");

        //webm test
        isSupport = support_webM_VideoFromats();
        alert(isSupport ? "support webm video " : "do not support webm video");

        /*
        if (Modernizr.video) {
            alert(Modernizr.video.ogg ? "support ogg video " : "do not support ogg video");
            alert(Modernizr.video.h264 ? "support mp4 video " : "do not support mp4 video");
        }
        */
    }

    //local storage
    function testLocalStorage() {
        var isSupport = supportLocalStorage();
        alert(isSupport ? "support local storage" : "do not support local storage");

        //alert(Modernizr.localstorage ? "support local storage" : "do not local storage");    
    }

    //web workers
    function testWebWorkers() {
        var isSupport = supportWebWorkers();
        alert(isSupport ? "support web workers" : "do not support web workers");
        
        //alert(Modernizr.webworkers ? "support web workers" : "do not support web workers");   
    }

    //off line
    function testOffLine() {
        var isSupport = supportOffLine();
        alert(isSupport ? "support offline" : "do not support offline");
        //alert(Modernizr.applicationcache ? "support offline" : "do not support offline");
    }

    //geolocation
    function testGeolocation() {
        var isSupport = supportGeolocation();
        alert(isSupport ? "support geolocation" : "do not support geolocation");
        //alert(Modernizr.geolocation ? "support geolocation" : "do not support geolocation");    
    }
   
</script>