pushState（）和popState（）：操纵浏览器的历史

Question

我正在创建一个我想创建Ajax样式的网站的小项目。内容加载了jQuery的load()。正如你们中的一些人所知道的，这种情况的缺点是URL不会相应地显示内容。要完成这项工作，您可以使用pushState()。由于这不支持跨浏览器，因此我使用插件history.js。

这工作相当好，但问题是我的后退和前进按钮不工作，因为他们应该，我不知道我做错了什么。 URL正在改变，内容也一样，但标题完全没有改变。标题指的是浏览器窗口的窗口（或标签）的标题。即加载的页面的<title>或引用该页面的链接的标题属性（它们是相同的）。我认为这与我只打电话给我需要标题的一部分页面有关（即通过将#content添加到load()）。我仍然想要那个页面的标题。这是我迄今为止所做的一个测试案例。 （不提供任何更多，因为12月28日2013年）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', function() { 
      var returnLocation = history.location || document.location; 

      $('#sectionContainer').load(returnLocation + "#content"); 
    }); 
}); 

我也注意到，回到基本的页面（如/ sectionLoaderTest /），当它变成空白了一段时间，只有经过一段时间第一页的内容被加载。有没有一种方法来优化这个？

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

所以这三个问题是：

1. 拿到冠军去的时候向前和向后
2. 前进时优化炫魅的加载时间
3. 修复活动类和落后
工作

欢迎所有帮助！

注意1：我想建立在history.js和我自己的脚本上，并继续支持< HTML5浏览器。我宁愿这样做，因为1.我知道这必须工作，只是出了问题。 2.如果我能看到自己的解决方案并在我已经编写的脚本中执行它，而不是找出一个全新的脚本，那将节省时间。

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

Answer 1

回答1 - 拿到冠军前进时和后退

据我了解，你想改变的链接文档标题HTML在一个div加载工作。当你通过jQuery .load在div中加载文件时，你只需要在ajax请求之后插入完整的响应文本。所以所有的东西不应该在title或meta标签的div中。然而，当前文档的标题（http://bramvanroy.be/sectionLoaderTest/index.html）在title中定义，该标题位于head标记内，而不是位于div内的title标记内，因此文档标题不会更改。

那么我该如何解决它？

好问题，因为div元素内的title元素是无效的，大多数浏览器会删除它，所以你不能只用这样的：

document.title = $("#sectionContainer title").text(); 

因为title元素可能不存在。

所以我们需要的是来自jQuery .load函数的直接响应。我可以通过添加回调函数参数得到它：

$("#sectionContainer") 
    .hide() 
    .load(newLoadedHtml, function(responseText) { 
     document.title = $(responseText).filter("title").text(); 
    }) 
    .fadeIn("fast"); 

你可能不明白的是为什么我用.filter，而不是.find功能。这是因为jQuery是一种解析HTML标签html,head和body的标签，但不删除那里的子元素。

回答2 - 优化的文件正从顶部至底部加载的炫魅

的加载时间。

所以首先应该加载CSS，JavaScript等，然后是主文档。 由于jQuery在执行之前总是等待文档，所以将所有script元素放在主体结束之前并不是一个坏主意，因此您的HTML可以在之前加载。

BtW我刚刚在第一次遇到这个问题之后，所有内容都被缓存了，文档加载非常快。

回答3 - 前进时修复活动类和落后

我要说的环槽的a元素的href属性和它的数据来自History.getState()比较。应该很容易。

你没有在你的代码的一些错误 - 你的固定代码：

你附加的散列#content所有URL ..它没有任何意义，它会通过jQuery的再次卸下：https://github.com/jquery/jquery/blob/master/src/ajax.js#L617（自带从线路：158，190，337，617 - rhash是第6行）

$(document).ready(function() { 
    var firstLink = $("ul > li:first-child > a"); 
    var menuLink = $("ul > li > a"); 
    var firstLoadedHtml = firstLink.attr("href"); 

    $("#sectionContainer").hide().load(firstLoadedHtml).fadeIn("fast"); 
    firstLink.addClass("active"); 

    menuLink.click(function(e) { 

     e.preventDefault(); 
     e.stopImmediatePropagation(); 

     var newLoadedHtml = $(this).attr("href"); 

     History.pushState(null, newLoadedHtml, newLoadedHtml); 

     $("#sectionContainer") 
      .hide() 
      .load(newLoadedHtml, function(responseText) { 
       document.title = $(responseText).filter("title").text(); 
      }) 
      .fadeIn("fast"); 
    }); 

    History.Adapter.bind(window, "statechange", function() { 
     menuLink.removeClass("active"); 
     $("a[href='" + History.getState().title + "']").addClass("active"); 
     $('#sectionContainer').load(document.location.href, function(responseText) { 
      document.title = $(responseText).filter("title").text(); 
     }); 
    }); 
}); 

Answer 2

您也可以尝试像davis.js或jQuery的推杆可用路由插件https://github.com/salvan13/jquery-pusher