使用 Google Chrome 内嵌框架在旧版浏览器中呈现 HTML5

Malte Ubl
Malte Ubl
X 首页

简介

HTML5 为 Web 开发者工具箱添加了许多出色的新工具，包括：

  • 功能更强大的全新 JavaScript API
  • 适用于矢量图形的 SVG
  • 适用于 2D 的 Canvas，以及 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 框架，则任何网站都不会出现问题，因为网站可以完全控制使用插件或默认呈现方式。以下代码段展示了网站如何选择由 Chrome Frame 呈现。

方法 1：HTTP-Header（您可以将其添加到 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 框架用户代理。

使用服务器端检测来查找此令牌，并确定是否可以对网页使用 Chrome Frame。如果存在 Chrome Frame，您可以插入所需的元标记；如果不存在，您可以将用户重定向到说明如何安装 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/ 您也可以直接将用户定向至 EULA，而不是 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。除了让用户能够在许多网站上获得更现代的 Web 体验之外，Chrome Frame 还显著缩短了初始加载时间。您可以访问 webpagetest.org，并选择 Chrome Frame 作为浏览器，以检查 Chrome Frame 是否有助于加快网站的呈现速度。

更多信息

如需了解详情，请参阅入门指南或观看 2011 年 Google IO 大会的此视频