1.4 瀏覽器對HTML5支持性檢測

HTML5應(yīng)用不需要額外的服務(wù)器支持，只要在客戶端使用瀏覽器即可運(yùn)行。目前，已經(jīng)有多種瀏覽器對HTML5的部分功能提供了支持，例如，微軟公司的Internet Explorer 9瀏覽器、Mozilla的Firefox瀏覽器、Google的Chrome瀏覽器，以及Opera瀏覽器等。然而各瀏覽器還并未提供對HTML5所有功能的完善支持，因此在應(yīng)用HTML5之前，應(yīng)該先進(jìn)行當(dāng)前瀏覽器對HTML5支持性的檢測。

檢測瀏覽器是否支持HTML5特性有多種方法，主要包括以下幾種。

（1）檢測指定元素的DOM對象是否能被瀏覽器正確識別。例如，以檢測canvas元素為例，創(chuàng)建一個html頁面testHTML5.html，并輸入以下代碼。

在此頁面中，我們使用了canvas元素創(chuàng)建一個畫布，如果瀏覽器支持該元素，則會顯示出一塊背景顏色為藍(lán)色的畫布；如果瀏覽器不支持該元素，則會直接顯示中間的語句。保存后，使用IE6.0瀏覽器打開此頁面，得到結(jié)果如圖1-1所示。

使用Chrome瀏覽器打開此頁面，得到結(jié)果如圖1-2所示。

圖1-1 瀏覽器不支持HTML5的canvas元素

圖1-2 瀏覽器支持HTML5的canvas元素

（2）檢測指定元素是否擁有特定的方法，并調(diào)用指定方法檢查返回值。仍以canvas元素為例，該元素使用方法getContext()獲取該元素上下文。創(chuàng)建一個HTML頁面testHTML5_2.html，并輸入如下代碼。

在此頁面中，我們通過編寫JavaScript代碼獲取canvas元素的DOM對象，并調(diào)用alert方法顯示canvas元素的getContext()方法。保存后，使用IE6.0瀏覽器打開此頁面，得到結(jié)果如圖1-3所示。

使用Chrome瀏覽器打開此頁面，得到結(jié)果如圖1-4所示。

圖1-3 瀏覽器不支持canvas元素的getContext方法

圖1-4 瀏覽器支持canvas元素的getContext方法

（3）檢測全局對象是否擁有特定的屬性。例如以檢測全局對象navigator的geolocation屬性為例，創(chuàng)建一個HTML頁面testHTML5_3.html，輸入如下代碼。

在此頁面中，我們通過編寫JavaScript代碼，使用alert方法顯示navigator元素的geolocation屬性。保存后，使用IE6.0瀏覽器打開此頁面，得到結(jié)果如圖1-5所示。

圖1-5 瀏覽器不支持navigator的geolocation屬性

使用Chrome瀏覽器打開此頁面，得到結(jié)果如圖1-6所示。

圖1-6 瀏覽器支持navigator的geolocation屬性

（4）使用HTML特性檢測工具。Modernizr是一個開源的JavaScript類庫，主要用于檢測瀏覽器是否支持HTML5的新特性。我們可以在Modernizr的官方網(wǎng)站http://modernizr.com下載Modernizr的最新版本。下載后得到一個JavaScript文件，在頁面中引用該文件，即可進(jìn)行相關(guān)檢測。例如，創(chuàng)建一個HTML頁面testHTML5_4.html，并輸入以下代碼。

在此頁面中，我們調(diào)用Modernizr對HTML5的video元素進(jìn)行檢測，如果瀏覽器支持該元素則Modernizr.video返回true，否則返回false。保存后，使用IE6.0瀏覽器打開此頁面，得到結(jié)果如圖1-7所示。

使用Chrome瀏覽器打開此頁面，得到結(jié)果如圖1-8所示。

圖1-7 Modernizr檢測瀏覽器不支持video元素

圖1-8 Modernizr檢測瀏覽器支持video元素

對于上述介紹的幾種檢測方法，讀者應(yīng)熟練掌握。因為HTML5還處于發(fā)展階段，而各瀏覽器廠商對HTML5的支持性也在不斷進(jìn)步。對于某些新特性，如果在使用中沒有達(dá)到預(yù)期的效果，不一定是因為錯誤地使用了HTML5的新特性，也有可能是因為當(dāng)前瀏覽器沒有提供此特性的支持。讀者需提高對檢測機(jī)制重要性的認(rèn)識，避免產(chǎn)生低級的錯誤。