pushState（）和popState（）：操纵浏览器的历史 [英] pushState() and popState(): manipulating browsers' history

问题描述

我正在开发一个小项目，我想在其中创建一个Ajax风格的网站。内容使用jQuery的 load（）加载。正如你们中的一些人所知，这样做的缺点是URL不会相应地改变显示的内容。要完成这项工作，您可以使用 pushState（）。由于这不支持跨浏览器，因此我使用插件 history.js 。

这是可行的相当好，但问题是我的后退和前进按钮不能正常工作，我不知道我做错了什么。 URL正在正确更改，内容也是如此，但标题根本没有变化。对于标题，我的意思是显示为浏览器窗口的窗口（或标签）的标题。即加载页面的< title> 或引用该页面的链接的标题属性（它们是相同的）。我认为这与我只呼叫我需要标题的一部分页面（即向载入中添加 #content ）的事实有关（））。我仍然想要那个页面的标题。这是我迄今为止所做的一个测试案例。 （自2013年12月28日起不再提供）。jQuery文件：

  $（document）.ready（function（）{ 
 var firstLink = $（ul> li：first-child> a）; 
 var menuLink = $（ul> li> a）; 
 var firstLoadedHtml = firstLink.attr（href）+#content; 
 
 $（＃sectionContainer）。hide（）。load（firstLoadedHtml）.fadeIn（fast）; 
 firstLink.addClass（active）; 
 
 menuLink.click（function（e）{
 history.pushState（null，null，this.href）; 
 
 e.preventDefault（）; 
 e.stopImmediatePropagation（）; 
 
 var CurLink = $（this）; 
 var newLoadedHtml = CurLink.attr（href）+ #content; 
 var oldSection = $（。contentPage）; 
 
 $（＃sectionContainer）。hide（）。load（newLoadedHtml）.fadeIn（fast ）; 
 menuLink.removeClass（active）; 
 CurLink.addClass（active）; 
}）; 
 
 $（window）.bind（ 'popstate'，函数（ ）{
 var returnLocation = history.location || document.location; 
 
 $（'＃sectionContainer'）。load（returnLocation +#content）; 
}）; 
}）; 
  

我还注意到，当回到基本页面（即/ sectionLoaderTest /）时，它变为空白一段时间后，仅在一段时间后加载第一页的内容。有没有办法优化它？

此外，我使用jQuery将一个活动类添加到已被单击的链接。我怎样才能确保这个变化相应的历史？因此，当用户导航返回时，正确的链接会突出显示。

因此，这三个问题是：

$ ol b $ b

在前进和后退时获取标题

优化主页的加载时间

修复active class前进和后退

所有帮助都欢迎您！
$ b 1 ：我想建立在history.js和我自己的脚本上，并继续支持< HTML5 浏览器。我更喜欢这个因为1.我知道这必须起作用，有些事情会出错。 2.如果我能看到自己的解决方案并在我已经写过的脚本中实现它，而不是找出一个全新的脚本，那将节省时间。

$ b

注2 ：赏金只会给予他或她谁可以回答我所有的问题（3）！

> 回答1 - 在前进和后退时获得标题

据我了解，您希望将文档标题html从链接加载在一个div中。当您通过jQuery .load 在div中加载文件时，您只需在其中输入ajax请求后插入完整的响应文本。因此，所有不应该在div中的东西，如 title 或 meta 标记。然而，当前文档的标题（ http://bramvanroy.be/sectionLoaderTest/index.html ）在 title 它位于头部标记内，而不在