easy html5 - HTML5特性检测

HTML5是一些新的独立特性的集合,因此我们不能检测浏览器是否支持“HTML5”,但是我们可以分别检测浏览器是否支持诸如“画布(canvas)”、“视频(video)”、“地理位置(geolocation)”等特性

简介

做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>

实例代码

你可能感兴趣的:(html5)