簡介
HTML5 為網頁開發人員工具箱新增了許多實用工具,包括:
- 全新且更強大的 JavaScript API
- 向量圖形的 SVG
- 2D 無框畫和 WebGL 3D 圖形
- 用於圓角、漸層等的 CSS3
- 更生動的標記
當然,這份清單並非完整無缺,網路平台已大幅進步,舊版瀏覽器與新版瀏覽器之間的差距每天都在擴大。
目前,所有主要電腦版瀏覽器的最新版本都支援 HTML5 的大部分功能,但舊版瀏覽器仍在使用,因此難以採用最新的功能。
Google Chrome Frame 可協助您建構最新的 HTML5 網頁,同時讓使用舊版瀏覽器的使用者也能查看您的內容。
什麼是 Google Chrome Frame
Google Chrome Frame 是 Internet Explorer 的外掛程式,可使用 Google Chrome 的轉譯引擎轉譯完整的瀏覽器畫布。它支援 Chrome 中的所有 HTML5 功能,並能無縫整合至 Internet Explorer 使用者體驗。Chrome Frame 適用於 Internet Explorer 6、7、8 和 9。在支援舊版瀏覽器 (例如 IE6 到 IE8) 時,Chrome Frame 的確更實用,但如果您需要為應用程式提供 WebGL,要求 IE9 使用者安裝 Chrome Frame 也許也是個好主意。
HTML5 polyfill 可讓您以其他方式順利轉換至新版瀏覽器。很遺憾,模擬器無法模擬所有功能,而且會讓舊版瀏覽器 (比新一代瀏覽器更慢) 的網頁速度變慢。
即使您的網站不需要 HTML5 功能,使用 Chrome Frame 仍可提供更好的使用者體驗。對於已安裝此擴充功能的使用者,算繪作業通常會更快,而且他們可以存取舊版瀏覽器不支援的功能。當然,您還是可以為沒有 Chrome Frame 的使用者支援舊版瀏覽器。
啟用
您可以新增 HTML 中繼標記或使用 HTTP 標頭,讓 Chrome Frame 轉譯網頁。這一點非常重要。也就是說,如果使用者已安裝 Chrome Frame,則不會有任何網站發生中斷情形,因為網站可完全控制使用外掛程式或預設轉譯。以下程式碼片段說明網站如何選擇由 Chrome Frame 算繪。
選項 1:HTTP 標頭 (您可以將這項資訊加入 HTTP 伺服器 (例如 Apache) 設定):
X-UA-Compatible: chrome=1
方法 2:中繼標記 (只要將這段程式碼貼到 HTML 的 <head> 部分即可)
<meta http-equiv="X-UA-Compatible" content="chrome=1">
將這兩者其中一種加入網站後,如果使用者在電腦上安裝 Chrome Frame,系統就會使用 Chrome Frame 轉譯網頁。
提示安裝 Google Chrome 內嵌框架
您可能會決定完全淘汰舊版瀏覽器的支援,原因有很多,包括:
- 您的網站需要使用 HTML5 影片、畫布、WebGL 或 CSS3 等新功能
- 在舊版瀏覽器上花費的開發時間過長
- 加快新功能的開發時間
Chrome Frame 可能會提供策略,讓舊版瀏覽器的使用者繼續使用您的網站。
Chrome Frame 會使用「chromeframe」字串擴充主機的 User-Agent 標頭,傳送可用資訊。詳情請參閱「Chrome Frame 使用者代理程式」。
使用伺服器端偵測功能尋找這個符記,並判斷是否可在網頁中使用 Chrome Frame。如果有 Chrome Frame,您可以插入必要的 Meta 標記;如果沒有,則可以將使用者重新導向至說明如何安裝 Chrome Frame 的頁面。您可以使用 CFInstall.js 指令碼偵測 Chrome Frame,並提示使用者安裝外掛程式,而無需重新啟動瀏覽器,這也是伺服器端嗅探的替代方案。使用指令碼很簡單。只要在頁面中加入指令碼標記和選用樣式,如以下範例所示:
<html>
<body>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<style>
/*
CSS rules to use for styling the overlay:
.chromeFrameOverlayContent
.chromeFrameOverlayContent iframe
.chromeFrameOverlayCloseBar
.chromeFrameOverlayUnderlay
*/
</style>
<script>
// You may want to place these lines inside an onload handler
CFInstall.check({
mode: "overlay",
destination: "http://www.waikiki.com"
});
</script>
</body>
</html>
提醒自己
您也可以自行建立到達網頁或層。將使用者導向這個網址
http://www.google.com/chromeframe/
可放入 IFRAME。
在安裝完成後,附加重新導向參數,將使用者帶回您的網站:
http://www.google.com/chromeframe/?redirect=http://www.google.com/ 除了前往 Chrome Frame 到達網頁,您也可以直接將使用者導向到使用者授權協議,這樣一來可省去安裝程序中的一個步驟。 http://www.google.com/chromeframe/eula.html
無須管理員權限
使用者不必擁有電腦的管理員權限,也能安裝 Chrome Frame。
附加 user=true 參數,即可啟用使用者層級的 Chrome Frame 安裝作業,如下所示:
http://www.google.com/chromeframe/?user=true
企業安裝
企業可以使用 MSI 安裝程式,在公司內部部署 Chrome Frame,安裝程式可從 http://www.google.com/chromeframe/eula.html?msi=true 下載。
如要進一步瞭解 Chrome 和企業部署作業,請參閱 http://www.chromium.org/administrators。
採用率
許多主要網站 (例如 yahoo.com、wordpress.com 和多個 Google 資源) 都採用了 Google Chrome Frame。除了讓使用者享有許多網站的新型態網頁體驗,Chrome Frame 也大幅縮短初始載入時間。如要確認 Chrome Frame 是否有助於加快網站的算繪速度,請前往 webpagetest.org,並選取 Chrome Frame 做為瀏覽器。
更多資訊
如需更多資訊,請參閱入門指南,或觀看這部 Google IO 2011 的影片