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

Malte Ubl
Malte Ubl
X 首页

简介

HTML5 为 Web 开发者工具箱增加了许多很棒的新工具，包括：

  • 更强大的新版 JavaScript API
  • 用于矢量图形的 SVG
  • 2D 画布和 WebGL 3D 图形
  • 适用于圆角、渐变等效果的 CSS3
  • 更具表现力的标记

当然，此列表并不详尽；网络平台已经发展迅猛，旧浏览器与现代浏览器之间的差距每天都在扩大。
目前，所有主流的桌面浏览器在最新版本中都支持 HTML5 的重要部分，但依旧是旧版浏览器，为采用当今最新、最出色的功能带来了挑战。

Google Chrome 浏览器内嵌框架不仅可帮助您构建先进的 HTML5 网页，同时仍能确保使用旧版浏览器的用户查看您的内容。

什么是 Google Chrome 内嵌框架

Google Chrome 内嵌框架是一款适用于 Internet Explorer 的插件，可让您使用 Google Chrome 的渲染引擎渲染完整的浏览器画布。它支持 Chrome 中的所有 HTML5 功能，这些功能均已无缝集成到 Internet Explorer 用户体验中。Chrome 内嵌框架适用于 Internet Explorer 6、7、8 和 9。在支持旧版浏览器（例如 IE6-to-IE8）时，Chrome 内嵌框架无疑会更有用；但举例来说，如果您的应用要求使用 WebGL，那么要求 IE9 用户使用 Chrome 内嵌框架可能也很有用。

HTML5 polyfill 提供了一种另一种方法来顺畅地过渡到较新的浏览器。遗憾的是，它们无法模拟所有功能，并且会在旧版浏览器中拖慢您网页的速度，这些旧版浏览器已经比新一代浏览器慢，甚至更多。

即使您的网站不需要 HTML5 功能，使用 Chrome 内嵌框架仍然可以提供更好的用户体验。对于已安装此应用的用户，呈现速度通常更快，并且他们可以使用旧版浏览器不支持的功能。当然，您仍然可以决定为计算机上未安装 Chrome 内嵌框架的用户支持旧版浏览器。

选择启用

您可以添加 HTML 元标记或使用 HTTP 标头，让 Chrome 内嵌框架呈现网页。这一点非常重要。这意味着只要用户安装了 Chrome 内嵌框架，就不会破坏任何网站，因为网站可以完全控制插件的使用或默认渲染。以下代码段展示了网站如何选择由 Chrome 内嵌框架呈现。

方式 1：HTTP-Header（您可以将其添加至 HTTP 服务器（例如 Apache））：

X-UA-Compatible: chrome=1

方式 2：元标记（只需将以下内容粘贴到 HTML <head> 部分即可）

<meta http-equiv="X-UA-Compatible" content="chrome=1">

将上述任何一项添加到网站后，如果用户计算机上安装了 Chrome 内嵌框架，系统会使用 Chrome 内嵌框架呈现网页。

提示使用 Google Chrome 内嵌框架

您可能会出于多种原因决定完全停止对旧版浏览器的支持，其中包括：

  • 您的网站需要使用新型功能，例如 HTML5 视频、画布、WebGL 或 CSS3
  • 在旧版浏览器上所花的开发时间过长
  • 加快新功能的开发速度

Chrome 内嵌框架可能会提供策略，让使用旧版浏览器的用户仍能使用网站。

Chrome 内嵌框架通过使用字符串“chromeframe”扩展主机的 User-Agent 标头来传输该框架可供使用。 有关详情，请参阅 Chrome 内嵌框架用户代理。

使用服务器端检测查找此令牌，并确定是否可以将 Chrome 浏览器内嵌框架用于网页。如果 Chrome 内嵌框架存在，您可以插入所需的元标记；如果不存在，您可以将用户重定向到说明如何安装 Chrome 内嵌框架的网页。作为服务器端嗅探的替代方案，您可以使用 CFInstall.js 脚本检测 Chrome 内嵌框架并提示用户安装插件，而无需重新启动浏览器。使用脚本非常简单。只需按以下示例所示将脚本标记和可选样式添加到您的网页即可：

<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 内嵌框架着陆页，从而在安装过程中省去了一步。 http://www.google.com/chromeframe/eula.html

无需管理员权限

用户无需在其计算机上拥有管理员权限即可安装 Chrome 内嵌框架。

附加 user=true 参数，即可启用 Chrome 内嵌框架的用户级安装功能，如下所示：

http://www.google.com/chromeframe/?user=true

企业版安装

企业可以使用 MSI 安装程序在公司范围内部署 Chrome 内嵌框架，该安装程序可从此处下载：http://www.google.com/chromeframe/eula.html?msi=true。

如要详细了解 Chrome 和企业版部署，请访问 http://www.chromium.org/administrators。

采用

许多主要网站（例如 yahoo.com、wordpress.com 和一些 Google 产品和服务）都采用了 Google Chrome 内嵌框架。除了让用户在许多网站上畅享更现代的网络体验之外，Chrome 内嵌框架还显著缩短了初始加载时间。您可以转到 webpagetest.org，然后选择 Chrome 内嵌框架作为浏览器，检查 Chrome 内嵌框架是否有助于提高网站的渲染速度。

了解详情

有关详情，请参阅入门指南或观看 2011 年 Google IO 大会上的这个视频