我在这里提出了一个成功的 HTML5 历史最小示例：http: //cairo140.github.com/html5-history-example/one.html
在我看来，进入 HTML5 pushstate 的最简单方法是暂时忽略该框架并使用最简单的状态转换：大量替换<body>and<title>元素。在这些元素之外，标记的其余部分可能只是样板，尽管如果它发生变化（例如，如果您在后端更改 HTML 上的类），您可以适应它。
像 CI 这样的动态后端所做的本质上是通过动态动态生成数据来伪造特定位置（由 URL 标识）的数据存在。我们可以通过创建资源并将它们放置在您的 Web 服务器（可能是 Apache）可以简单地识别它们并提供它们的位置来抽象出框架的影响。我们将有一个相对于域根目录非常简单的文件系统结构：
/one.html
/two.html
/assets/application.js
这些是我们正在使用的仅有的三个文件。
这是两个 HTML 文件的代码。如果您在处理 HTML5 功能时处于水平，您应该能够理解标记，但是如果我没有说清楚，请发表评论，我将引导您完成它：
一个.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>One</title>
</head>
<body>
<div class="container">
<h1>One</h1>
<a href="two.html">Two</a>
</div>
</body>
</html>
二.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>Two</title>
</head>
<body>
<div class="container">
<h1>Two</h1>
<a href="one.html">One</a>
</div>
</body>
</html>
您会注意到，如果您one.html通过浏览器加载，您可以单击指向 的链接two.html，这将加载并显示一个新页面。并且从two.html，你可以做同样的回one.html。凉爽的。
现在，对于历史部分：
资产/application.js
$(function(){
var replacePage = function(url) {
$.ajax({
url: url,
type: 'get',
dataType: 'html',
success: function(data){
var dom = $(data);
var title = dom.filter('title').text();
var html = dom.filter('.container').html();
$('title').text(title);
$('.container').html(html);
}
});
}
$('a').live('click', function(e){
history.pushState(null, null, this.href);
replacePage(this.href);
e.preventDefault();
});
$(window).bind('popstate', function(){
replacePage(location.pathname);
});
});
这个怎么运作
我replacePage在 jQuery 就绪回调中定义了在参数中直接加载 URL，并用远程检索的内容替换titleand元素的内容。.container
调用是指页面上live任何一个链接点击都会触发回调，回调将状态推送到href链接中的 并调用replacePage。它还用于e.preventDefault防止链接被正常处理。
最后，popstate当用户使用基于浏览器的页面导航（后退、前进）时会触发一个事件。我们将一个简单的回调绑定到该事件。值得注意的是，由于某种原因，我无法让 Dive Into HTML 页面上的版本在 FF for Mac 中工作。不知道为什么。
如何扩展它
这个非常基本的示例可以或多或少地移植到任何站点，因为它进行了非常没有创意的转换：HTML 替换。我建议你可以以此为基础，过渡到更有创意的过渡。您可以做的一个示例是模拟 Github 在其存储库中使用目录导航所做的事情。这是一个需要浮动和溢出管理的中间操作。您可以从更简单的过渡开始，例如将.container加载页面中的 附加到 DOM，然后将旧容器动画到{height: 0}.
解决您的特定“例如”
您在使用 HTML5 历史记录方面处于正确的轨道上，但您需要澄清您对包含哪些内容/foo和/bar将包含哪些内容的想法。基本上，您将拥有三个页面：/、/foo和/bar。/将有一个空的容器 div。/foo将与/容器 div 中包含一些 foo 内容的情况相同。除了容器 div 中包含一些 bar 内容之外，/bar将与 相同。/foo现在，问题是如何通过 Javascript 提取容器的内容。假设您的/foo body标签看起来像这样：
<body>
<a href="/foo">foo</a>
<a href="/bar">bar</a>
<div class="container">foo</div>
</body>
然后你会从响应中提取它，然后data通过. 您使用而不是更合理的，因为出于某种古怪的原因，jQuery 的 DOM 解析器会生成一个 jQuery 对象，其中包含元素的每个子元素和元素的每个子元素，而不仅仅是包装元素的 jQuery 对象。我不知道为什么。var html = $(data).filter('.container').html()$('.container').html(html)filterfindheadbodyhtml
其余的只是将其改编回上面的“香草”版本。如果您被困在任何特定阶段，请告诉我，我可以为您提供更好的指导。
代码
https://github.com/cairo140/html5-history-example