48

私はjsに関してはほとんど初心者なので、本当に単純なものが欠けていたらごめんなさい。

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

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

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

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

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

$(document).ready()セクション以降で<script>タグだけで試してみましたが、どちらも機能しませんでした。

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

誰かが私を助けることができたら、それは素晴らしいことです。

4

2 に答える 2

56

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

次のようになると：

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

最初のページは ではなく定期的に読み込まれたため、状態はありませんpushState。その結果、onpopstateイベントはstateof で発生し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);
于 2011-11-07T15:45:54.813 に答える