簡(jiǎn)介

做web前段開(kāi)發(fā)人員已經(jīng)習(xí)慣了處理多瀏覽器兼容(如IE、firefox、chrome)、多瀏覽器版本兼容(Ie6、ie7、ie8、ie9)，我們需呀從js和css上考慮讓它如何兼容，如何一致；HTML5也一樣，只是它更廣泛的被瀏覽器開(kāi)發(fā)商接受并兼容，而且效果良好；但是這里仍舊有一個(gè)問(wèn)題，就是“有些老的瀏覽器不支持” :(；你把html5用的爐火純青，忽然來(lái)個(gè)ie6用戶；所以我們需要對(duì)瀏覽器對(duì)html5的支持做一定的檢測(cè)，從而給用戶以有好提示；

創(chuàng)新互聯(lián)建站：成立于2013年為各行業(yè)開(kāi)拓出企業(yè)自己的“網(wǎng)站建設(shè)”服務(wù)，為近千家公司企業(yè)提供了專業(yè)的網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站推廣服務(wù)， 按需定制網(wǎng)站由設(shè)計(jì)師親自精心設(shè)計(jì)，設(shè)計(jì)的效果完全按照客戶的要求，并適當(dāng)?shù)奶岢龊侠淼慕ㄗh，擁有的視覺(jué)效果，策劃師分析客戶的同行競(jìng)爭(zhēng)對(duì)手，根據(jù)客戶的實(shí)際情況給出合理的網(wǎng)站構(gòu)架，制作客戶同行業(yè)具有領(lǐng)先地位的。

起初前端工程師們就極力反對(duì)瀏覽器檢測(cè)，他們認(rèn)為類似user-agent嗅探的方法是很不好的，理由是它并不是一種面向未來(lái)的代碼，無(wú)法適應(yīng)新版的瀏覽器。更好的做法是使用特性檢測(cè)

怎么檢測(cè)

當(dāng)瀏覽器在渲染web頁(yè)面的時(shí)候會(huì)構(gòu)造一個(gè)文檔對(duì)象模型(DOM)，通過(guò)它來(lái)表示頁(yè)面上的HTML元素，任何一個(gè)tag都會(huì)被表示為一個(gè)對(duì)象；當(dāng)然也有windwos和document這些不和特定頁(yè)面元素綁定在一起的全局對(duì)象；

       所有的dom對(duì)象都共享一些屬性，但是有些對(duì)象會(huì)擁有特定的屬性。在支持HTML5特性的瀏覽器中，特性相關(guān)的dom對(duì)象就會(huì)有特定的屬性。通過(guò)這些特定的屬性，我們可以快速的檢測(cè)出那些html5特性是被支持的。比如常見(jiàn)的四種方法：

1.檢測(cè)全局對(duì)象(如window,navigator)是否擁有特定的屬性。比如檢測(cè)地理位置特性

2.創(chuàng)建一個(gè)元素，然后檢測(cè)該元素的dom對(duì)象是否擁有特定的屬性。比如檢測(cè)畫布特性

3.創(chuàng)建一個(gè)元素，然后檢測(cè)這個(gè)元素dom對(duì)象是否擁有特定的方法，調(diào)用這個(gè)方法，并檢測(cè)返回值。比如檢測(cè)支持的視頻格式

4.創(chuàng)建一個(gè)元素，給這個(gè)元素的dom對(duì)象設(shè)定特定的屬性值，然后檢測(cè)瀏覽器是否保留了該屬性值

畫布(canvas)

在網(wǎng)頁(yè)中canvas就是一塊矩形區(qū)域，在這個(gè)區(qū)域里，我們可以畫任何內(nèi)容，html5標(biāo)準(zhǔn)中定義了一系列的canvas的api，用于繪制簡(jiǎn)單圖形、定義路徑、創(chuàng)建漸變、應(yīng)用圖像變換等。

檢測(cè)canvas api，可以通過(guò)創(chuàng)建canvas元素，判斷其dom對(duì)象是否有g(shù)etContext()方法； 

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

 

畫布文本(Canvas Text)

瀏覽器支持canvas api但不一定支持canvas text api，因?yàn)閏anvas api一直都在不斷完善中，cavas text(繪制文本)后來(lái)才被納入規(guī)范；既然如此，支持canvas text api必須要支持canvas api(見(jiàn)上)，如果李蘭奇支持canvas api，那么在獲得canvas繪圖上下文后，可以判斷是否有filltext方法，如果存在這個(gè)方法，則可以斷定瀏覽器支持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標(biāo)準(zhǔn)中定義了一個(gè)新元素video，用來(lái)將視頻簽入到web頁(yè)面中；之前如果想再web頁(yè)面中嵌入視頻，只能使用apple的quick time或者adobe flash播放器這些插件；video元素的可用性不需要任何腳本檢測(cè)；我們可以為它指定多個(gè)視頻格式的文件來(lái)進(jìn)行播放，不支持html5 video的瀏覽器會(huì)忽略video標(biāo)簽，在這種情況下我們可以指定用第三方插件來(lái)播放視頻，當(dāng)然這只是處理web頁(yè)面視頻的最好解決方案；如果你的確要做檢測(cè)，當(dāng)然是可以的。和canvas類似，創(chuàng)建一個(gè)video節(jié)點(diǎn)，判斷dom對(duì)象是否有某個(gè)屬性，這里使用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)

視頻編碼算法迥異，所以目前各瀏覽器還未達(dá)成一致，使用統(tǒng)一的視頻編碼算法；但是好在這種算法已經(jīng)縮減到兩周算法上：一種是safari和iphone的編碼算法；另一種是諸如chrome和mozilla firefox這類開(kāi)源瀏覽器的編碼算法；所以做視頻格式支持檢測(cè)，要分別判斷這兩種；還有一種WebM，它是一種新的開(kāi)源視頻編碼格式，會(huì)在Chrome，firefox和opera的下一個(gè)版本的到支持，所以我們也檢測(cè)咯；

 

要檢測(cè)瀏覽器是否支持某視頻格式，當(dāng)然必須支持video；先創(chuàng)建video節(jié)點(diǎn)，然后調(diào)用dom對(duì)象的canPlayType()方法，但是這個(gè)方法返回的不是一個(gè)bool值，因?yàn)橐曨l格式非常復(fù)雜，所以這個(gè)方法會(huì)返回一個(gè)字符串，分別為：

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

maybe：表示瀏覽器有可能可以播放此格式

“”(空字符串)：表示瀏覽器無(wú)法播放此格式

 mp4:

//mp4

        function support_h364BaseLine_VideoFormats() {

            if (!supportVideo()) {

                return false;

            }

            var v = document.createElement("video");

            return v.canPlayType("video/mp4;codecs='avc1.42E01E,mp4a.40.2'")

        }

Modernizr.video.h364

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

        function support_webM_VideoFromats() {

            if (!supportVideo()) {

                return false;

            }

            var v = document.createElement("video");

            return v.canPlayType("video/webm;codecs='vp8,vorbis'")

        }

 

本地存儲(chǔ)(Local Storage)

HTML5本地存儲(chǔ)允許網(wǎng)站把信息存儲(chǔ)到本地的計(jì)算機(jī)上，以便在需要時(shí)獲取。這和cookie類似，但cookie是有大小先知道的，而且每次請(qǐng)求一個(gè)新頁(yè)面時(shí)，cookie就會(huì)被發(fā)送回服務(wù)器；而html5本地存儲(chǔ)將信息存儲(chǔ)到用戶計(jì)算機(jī)上，網(wǎng)站可以再頁(yè)面加載完成后通過(guò)js獲??；檢測(cè)瀏覽器是否支持本地存儲(chǔ)可以通過(guò)判斷window對(duì)象是否有l(wèi)ocalStorage屬性 

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

Web Workers

Web Workers提供了一種標(biāo)準(zhǔn)的方式讓瀏覽器能夠在后臺(tái)運(yùn)行js，通過(guò)web worker，可以創(chuàng)建多個(gè)“線程”并讓他們同時(shí)執(zhí)行； 

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

離線web應(yīng)用

html5支持離線web應(yīng)用，即斷開(kāi)網(wǎng)絡(luò)后可以繼續(xù)訪問(wèn)web應(yīng)用程序；在第一次訪問(wèn)具備離線訪問(wèn)的web應(yīng)用時(shí)，web服務(wù)器會(huì)告訴瀏覽器哪些文件是保證離線正常工作必須得，一旦瀏覽器下載了這些必須文件，下次就可以在沒(méi)有網(wǎng)絡(luò)的情況下正常使用應(yīng)用；等下次用戶重新上線的時(shí)候，所有改動(dòng)都會(huì)上傳到遠(yuǎn)程的web服務(wù)器；檢測(cè)瀏覽器是否支持離線應(yīng)用，可以通過(guò)判斷window對(duì)象是否有applicationCache屬性；

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

地理位置(Geolocation)

瀏覽器在實(shí)現(xiàn)對(duì)html5新特性支持的同時(shí)，也紛紛加入了對(duì)地理位置特性的支持。嚴(yán)格的說(shuō)，地理位置特性并不屬于html5標(biāo)準(zhǔn)的一部分，它由地理位置工作組(Geolocation Working Group)負(fù)責(zé)制定標(biāo)準(zhǔn)，這個(gè)工作組和html5工作組沒(méi)關(guān)系；地理位置api的使用場(chǎng)景非常廣泛，尤其在移動(dòng)設(shè)備上；檢測(cè)瀏覽器是否支持地理位置api，可以判斷navigator是否有g(shù)eolocation屬性.

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

Modernizr.geolocation

 

網(wǎng)頁(yè)題目：HTML5特性檢測(cè)
網(wǎng)站網(wǎng)址：http://chinadenli.net/article10/ppccdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、微信公眾號(hào)、關(guān)鍵詞優(yōu)化、搜索引擎優(yōu)化、靜態(tài)網(wǎng)站、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)