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

时间:2013-03-22 16:02:09

标签: ajax history.js

我正在尝试让我的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');
}

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

由于

1 个答案:

答案 0 :(得分:0)

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