Question

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

我的内容div正在使用其中的锚点从另一个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');
}

任何人都可以看到我的错误吗？或者他们可以建议使用更好的插件吗？

由于

Answer 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

jQuery History Plugin的问题，还是更容易使用的替代方案？

1 个答案: