jQuery 历史插件的问题，或者更容易使用的替代方案？答案

【问题标题】：Problems with jQuery History Plugin, or easier to use alternative?jQuery 历史插件的问题，或者更容易使用的替代方案？
【发布时间】：2013-03-23 00:08:34
【问题描述】：

我正在尝试让我的 AJAX .load 函数具有返回/重新加载/书签功能。我正在使用 jquery 插件 history.js。

我的内容正在从另一个 html 文件加载到我的内容 div 中，使用其中的锚点来指定从哪个 div 中选择信息（取决于单击的链接）。

目前，我已经设法让插件更改地址，但返回/重新加载功能不起作用。

这是我正在使用的插件代码：https://github.com/balupton/jquery-history/blob/master/scripts/jquery.history.js

头：

<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript" src="core.js"></script>
<script type="text/javascript" src="path.js"></script>
<script type="text/javascript" src="back.js"></script>

导航：

<div id="leftnav">
        <p class="leftnavtext">
            <a class="navlinks" id="about2" href="#/about">ABOUT</a> <br>
            <a class="navlinks" id="process2" href="#/process">PROCESS</a> <br>
            <a class="navlinks" id="materials2" href="#/materials">MATERIALS</a> <br>
            <a class="navlinks" id="pricing2" href="#/pricing">PRICING</a>
        </p>

AJAX Javascript 代码：

$(document).ready(function(){
  $("#about2").click(function(){
    $("#content").load("content.html #about");
});
  $("#process2").click(function(){ 
    $("#content").load("content.html #process");
 });
  $("#materials2").click(function(){ 
    $("#content").load("content.html #materials");
});
  $("#pricing2").click(function(){
    $("#content").load("content.html #pricing");
 });
   $("#pricing3").click(function(){
    $("#content").load("content.html #pricing");
});
   $("#infinite1").click(function(){
    $("#content").load("content.html #infinite");
});


});

back.js 代码（path.js 是插件）：

function nav_event(hash) {
  // Some sort of navigation happened, update page
}

$(document).ready(function(){
  $.history.init(nav_event);
  $.history.load('#/about');
}

$(document).ready(function(){
  $.history.init(nav_event);
  $.history.load('#/process');
}

$(document).ready(function(){
  $.history.init(nav_event);
  $.history.load('#/materials');
}

$(document).ready(function(){
  $.history.init(nav_event);
  $.history.load('#/pricing');
}

$(document).ready(function(){
  $.history.init(nav_event);
  $.history.load('#/infinite');
}

谁能看到我哪里出了问题？或者他们能推荐一个更好的插件来使用吗？

谢谢

【问题讨论】：

标签： ajax history.js

【解决方案1】：

if (navigator.userAgent.match('MSIE')!=null) {return false;} /*prevent IE crash*/

    window.addEventListener("popstate",   function(e) {window.location = lastURL;  });

    window.history.pushState({"html": newURL,"pageTitle": newURL},"", newURL);

我从另一个答案中偷了这个。不幸的是，它在 IE 中不起作用。

进一步阅读：

http://html5doctor.com/history-api/

http://diveintohtml5.info/history.html

【讨论】：

干杯，我已经设法改变了 url 状态，但是在进一步阅读 history-api 信息之后，它提到如果地址（带有 hashbang）被粘贴到一个新的浏览器窗口中应该打开ajax页面。但仍然没有运气。