本頁面由 Cloud Translation API 翻譯而成。

使用 Google Chrome 內嵌框架在舊版瀏覽器中轉譯 HTML5

Malte Ubl

引言

HTML5 為網頁開發人員工具箱新增了大量實用的工具，包括：

更強大的新版 JavaScript API
向量圖形的 SVG
支援 2D 和 WebGL 3D 圖形的畫布
CSS3 (圓角和漸層等)。
提供更生動的標記

當然，這份清單並未涵蓋所有可能的情況；網路平台已大幅改變，老舊瀏覽器與新世代瀏覽器間的差距也不斷擴增。
現在每個主要的電腦版瀏覽器都支援最新版 HTML5 的大量功能，但舊版瀏覽器也難以採用最新最棒的功能。

Google Chrome Frame 可協助您立即建立最先進的 HTML5 網頁，同時讓舊版瀏覽器的使用者也能瀏覽您的內容。

什麼是 Google Chrome 內嵌框架

Google Chrome Frame 是 Internet Explorer 的外掛程式，可讓 Internet Explorer 使用 Google Chrome 的轉譯引擎轉譯完整的瀏覽器畫布。它支援您在 Chrome 中找到的所有 HTML5 功能，並與 Internet Explorer 使用者體驗完美整合。Chrome Frame 適用於 Internet Explorer 6、7、8 和 9。在支援 IE6 至 IE8 等舊瀏覽器時，Chrome 內嵌框架特別實用，但如果應用程式需要使用 WebGL，但需要 IE9 使用者的 Chrome Frame，應該也能派上用場。

HTML5 polyfill 可讓您順利轉換至新版瀏覽器。然而，這些程式碼無法模擬每項功能，而且會在舊版瀏覽器中拖慢網頁速度，因此新一代瀏覽器的速度也越來越慢。

即使您的網站不需要 HTML5 功能，使用 Chrome 框架仍可提供更優質的使用者體驗。如果使用者已安裝這個應用程式，則轉譯速度通常較快，而且可以使用舊版瀏覽器不支援的功能。當然，即便使用者未在電腦上安裝 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 轉譯網頁。

提示建立 Google Chrome 內嵌框架

您可能會基於下列各種原因，決定完全停止支援舊版瀏覽器，包括：

你的網站需要新型功能，例如 HTML5 影片、畫布、WebGL 或 CSS3
在舊版瀏覽器中花費的開發時間過高
縮短新功能的開發時間

Chrome Frame 可能會提供策略，讓舊版瀏覽器的使用者繼續使用您的網站。

Chrome Frame 會透過將主機的 User-Agent 標頭擴充為「chromeframe」字串，藉此傳輸 IP 範圍。詳情請參閱「Chrome Frame 使用者代理程式」。

使用伺服器端偵測功能來尋找這個權杖，並判斷是否適用於網頁。在存在 Chrome 內嵌框架的情況下，您可以插入必要的中繼標記；如果沒有，請將使用者重新導向至說明如何安裝 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 內嵌框架。

附加 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 也大幅縮短初始載入時間。您可以前往 webpagetest.org 並選取「Chrome 內嵌框架」做為瀏覽器，檢查 Chrome Frame 是否協助網站加快轉譯速度。