history.pushstateとpopstateで戻るボタンを使用しているときに変更をトリガーする方法はありますか？

Question

jsについてはかなり初心者ですので、本当にシンプルなものが見つからない場合はすみません。

基本的に、私はhistory.pustateとpopstateを使用してにいくつかの研究を行ってきたと私はそれがとてもクエリ文字列をURLの末尾（?v=images）または（?v=profile）に追加され作られました...（v私はdiv要素の中に私は​​機能を使用して行われているページをリロードせずにコンテンツをロードすることができますので、それを作りたい

var url = "?v=profile" 
var stateObj = { path: url }; 
history.pushState(stateObj, "page 2", url); 

：これを使用することによって）「ビュー」を意味します。

私は、このコードを使用：$(document).ready()セクションで

$(window).bind('popstate', function(event) { 
    var state = event.originalEvent.state; 

をし、後でちょうど<script>タグ内にしようと、どちらも働きました。

私はそれを作る方法がわからないので、私が戻るボタンを使用したり、少なくともそれを作るとコンテンツを変更して、私自身の機能をトリガーすることができます。私はそれが状態オブジェクトと関係があると仮定していますか？私はちょうどプロセスをはっきりと説明するものをオンラインで見つけられないようです。

誰かが私を助けることができたら、それはすばらしいことですし、誰かに事前に感謝します！

Answer 1

popstateには状態が1つしかない場合があります。

それはこのように書きます：

1. 状態がpushState
2. 戻るボタンで追加して、最初のページには、ロード
3. 新しいページをロードが

を押した後、何の状態が存在しない、なぜなら最初のページはpushStateではなく定期的に読み込まれました。その結果、onpopstateイベントが発生し、stateがnullになります。したがって、nullの場合は、元のページを読み込む必要があります。

あなたがそのようなhistory.pushStateが一貫呼び出され、あなただけのこのような状態の変更機能を提供する必要があることを実現することができます。多分それが最善の解決策ではありませんClick here for jsFiddle link

function change(state) { 
    if(state === null) { // initial page 
     $("div").text("Original"); 
    } else { // page added with pushState 
     $("div").text(state.url); 
    } 
} 

$(window).on("popstate", function(e) { 
    change(e.originalEvent.state); 
}); 

$("a").click(function(e) { 
    e.preventDefault(); 
    history.pushState({ url: "/page2" }, "/page2", "page 2"); 
}); 

(function(original) { // overwrite history.pushState so that it also calls 
         // the change function when called 
    history.pushState = function(state) { 
     change(state); 
     return original.apply(this, arguments); 
    }; 
})(history.pushState); 

Answer 2

を、そして多分それはあなたに合いませんニーズ。しかし私にとっては、ページをリロードするのが一番でした。したがって、ページには一貫性があり、現在のクエリーストリングに従ってすべてがロードされます。

$(document).ready(function() { 
    $(window).on("popstate", function (e) { 
     location.reload(); 
    }); 
});