js

Question

私はpace.jsを使用しましたが、paceの問題はページが完全に読み込まれた後に表示されました。

私は試して解決策を作りました。ページ上のすべてのリンクをonclickし、jquery grabsをクリックしてブラウザから直接リンクに行くイベントを停止し、そのリンクにajax get要求を送信します。ページが読み込まれている間、現在のページにアニメーションが表示されます。ページが完全に読み込まれると、現在のドキュメント全体が受信したデータに置き換えられ、アドレスバーのページURLが置き換えられます。

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('a').click(function() { 
      var dt; 
      if (/#/.test(this.href)) { 
       return true; 
      }else{ 
       document.getElementById("before-loader").style.display= "block";//show loading animation 
      var that = this; 
      $.ajax({ 
        type: "GET", 
        url: that.href, 
        success: function(response){ 
        document.open(); 
        document.write(response); 
        document.title = response.pageTitle; 
        window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", that.href); 
       document.close(); 
        }, 
        error: function(XMLHttpRequest, textStatus, errorThrown) { 
        alert(textStatus + ' ' + errorThrown); 
        document.getElementById("before-loader").style.display= "none";//hide loading animation 
        } 
       }); 
      return false; 
      } 
     }); 
    }); 
    </script> 

ブラウザの[戻る]ボタンをクリックすると、アドレスバーのURLが変更されますが、ページの内容は変わりません。 どうすればこの問題を解決できますか？

更新

se0kjunの答えは私の問題を解決（私はそれがコピーした後に動作するように期待していた/提供されたコードを貼り付け）が、正しい方向に私を入れていません。いくつかの研究とフローの書き換えの後、それは動作しますが、私はまだそれが動作する理由は混乱しています。

$(document).ready(function() { 
$('a').click(function() { 
     if (/#/.test(this.href)) { 
      return true; 
     }else{ 
     window.history.pushState(null, 'Production Workflow & Sales Management', this.href); 
      loadContent(this.href); 
     return false; 
     } 
    }); 
}); 


function loadContent(href) { 
    document.getElementById("before-loader").style.display= "block"; 
    $.ajax({ 
    type: "GET", 
    url: href, 
    success: function(response){ 
     document.open(); 
     document.title = response.pageTitle; 
     document.write(response); 
     document.close(); 
    }, 
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
     alert(textStatus + ' ' + errorThrown); 
     document.getElementById("before-loader").style.display= "none"; 
    } 
    }); 
} 


window.onpopstate = function(event) { 
    link = location.pathname.replace(/^.*[\\/]/, ""); // get filename only 
    loadContent(link); 
}; 

多分私はもっと勉強すべきです。

Answer 1

あなたはpopstateイベントにしたいと思います。

リンクをクリックすると、ajaxリクエストがthat.hrefに送信されます。その後、リクエストが成功した場合は、pushstateと応答します。

戻るボタンをクリックすると、popstateイベントが発生します。 popstateイベントハンドラに前のページを読み込むことができます。 popstate

window.onpopstate = function(event) { 
    //you add a path in pushstate 
    $('.container').load(event.state.path); 
    alert('popstate'); 
}; 

の使用例に続いて

は、ここで私は...あなたは `popstate`が必要だと思うfiddle