0

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');
}

これでどこが間違っているのか誰にもわかりますか？または、使用するより良いプラグインを提案できますか?

ありがとう

4

1 に答える 1

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

于 2013-03-22T16:08:34.337 に答える