1

履歴 API を理解しようとしていますが、ドキュメントを読んだ後、ほとんど何も理解できません。

たとえば、次の AJAX があります。

$("#hund").click(function(e) {
         e.preventDefault();
$(".result").load("hund.html #content", function() {
  });

次のブラウザ URL 操作:

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

これはわかります。何かをクリックして、URL を変更します。戻るをクリックして、URL を元に戻します。

しかし、AJAX クリックの後に戻るボタンがクリックされた場合、AJAX 呼び出しを元に戻す必要があります。その場合、それは結果の div が再び空になるか、またはいくつかのものをクリックしてからクリックして戻った場合、前のものをロードすることになります。

どうすればこの効果を達成できますか?

4

2 に答える 2

1

前のページの内容を保持します。例えば：

var lastPage = $('.result').children().remove();
$('.result').load(...);

次に、元に戻したい場合は、次のようにします。

$('.result').empty().append(lastPage);

少なくとも、それが基本原則です。実際には、誰かが複数回戻ることができるようにしたい場合は、1 つだけにすることはできませんlastPage。もっと複雑なことをする必要があります。

もう 1 つの複雑な方法は、以前にアクセスしたすべてのページのコンテンツをオブジェクトに保持することです ( cache)。次にnavigate、次のような関数がある場合があります。

var cache = {};
var currentPageName = /* something */;
function navigate(newPageName) {
    cache[currentPageName] = $('.result').children().remove();
    if(Object.prototype.hasOwnProperty.call(cache, newPageName)) {
        $('.result').append(cache[newPageName]);
        delete cache[newPageName];
    }else{
        $('.result').load(newPageName + ' #content');
    }
    currentPageName = newPageName;
    history.pushState(newPageName, newPageName, newPageName);
}

その後、onpopstateあなたも使用できますnavigate。

于 2013-04-27T23:00:45.597 に答える
1

ブラウザの履歴を手動で変更する必要があります。これにはライブラリがあります。

JQuery で URL ハッシュ/履歴を実行するのに最適なライブラリは何ですか?を参照してください。

于 2013-04-27T22:59:27.137 に答える