web-dev-qa-db-ja.com

history.pushstateおよびpopstateで戻るボタンを使用するときに変更をトリガーする方法は？

私はjsに関してはかなり初心者ですので、本当にシンプルなものを見逃してしまったらごめんなさい。

基本的に、history.pustateとpopstateの使用に関する調査をいくつか行い、URLの末尾にクエリ文字列が追加されるようにしました（_?v=images_）または（_?v=profile_）。 ..（vは「ビュー」を意味します）これを使用して：

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

.load()関数を使用して行ったページをリロードせずに、コンテンツをdivにロードできるようにしたいのです。

次に、このコードを使用しました：

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

$(document).ready()セクションで、後で_<script>_タグ内で試行したが、どちらも機能しなかった。

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

誰かが私を助けることができれば、それは驚くべきことであり、そうする人に前もって感謝します！

javascripthtml5back-buttonpushstate
45
Rwd

popstateには状態がある場合にのみ状態が含まれます。

次のようになったら：

  1. ロードされた最初のページ
  2. 新しいページが読み込まれ、pushStateを介して状態が追加されます
  3. 戻るボタンが押された

最初のページはpushStateではなく定期的にロードされたため、状態はありません。その結果、onpopstateイベントがstateのnullとともに発生します。したがって、nullの場合、元のページをロードする必要があることを意味します。

history.pushStateは一貫して呼び出され、次のような状態変更関数を提供するだけで済みます。 jsFiddleリンクはここをクリック

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);
52
pimvdb

たぶんそれは最善の解決策ではなく、おそらくあなたのニーズに合わないかもしれません。しかし、私にとっては、ページをリロードするのが最善でした。したがって、ページは一貫性があり、現在のクエリ文字列に従ってすべてをロードします。

$(document).ready(function() {
    $(window).on("popstate", function (e) {
        location.reload();
    });
});
8
Jiří Herník