API изучения истории - PullRequest
Новая
       5

API изучения истории

3 голосов
/ 05 июня 2011

Я пытаюсь изучить историю API после записи на http://diveintohtml5.info/history.html. Моя простая тестовая веб-страница выглядит следующим образом 

<body>
<ul>
    <li><a class="test" id="foo" href="/?a=foo">This is foo</a></li>
    <li><a class="test" id="bar" href="/?a=bar">This is bar</a></li>
    <li><a class="test" id="baz" href="/?a=baz">This is baz</a></li>
    <li><a class="test" id="qux" href="/?a=qux">This is qux</a></li>
</ul>

<script type="text/javascript">
//<![CDATA[
var A = {
    "test" : function(loc) {
        $.ajax({
            url : loc,
            type    : "GET",
            data    : "",
            dataType: "json",
            error   : function() { alert("Error"); },
            success : function(res) {
                var divs = ["foo", "bar", "baz", "qux"];
                for (var i = 0; i <= divs.length; i++) {
                    $("#" + divs[i]).html( res[ divs[i] ] );
                }
                history.pushState(null, null, loc);
            }
        });
    },

    "setupClicks" : function() {
        $(".test").click(function() {
            PK.test($(this).attr("href"));
            return false;
        });
    }
};

$(document).ready(function() {
    A.setupClicks();

    window.setTimeout(function() {
        window.addEventListener("popstate", function(e) {
            A.test(location.href);
        }, false);
    }, 1);
});
//]]>
</script>
</body>

Почти все работает хорошо. Когда я нажимаю на ссылку, URL-адрес изменяется правильно, новые фрагменты страницы извлекаются с сервера через ajax и вставляются в правильное местоположение.

Что не работает, так это кнопка возврата браузера. Вернее, это работает с первого раза, а не после этого. Итак, если я нажимаю «foo», затем «bar», затем «baz», затем «qux», а затем нажимаю кнопку «Назад» в браузере, я возвращаюсь от «qux» к «baz». Но после этого, независимо от того, сколько раз я нажимаю кнопку «Назад» в браузере, она остается на «baz» вместо возврата к «bar», а затем к «foo».

Что я делаю не так? (Я не хочу предложений для плагинов jQuery на данный момент. Я просто хочу понять ошибку моих путей).

1 Ответ

1 голос
/ 06 июня 2011

выяснил, почему мой код не работал, а также нашел хакерский обходной путь.Но мне все еще интересно узнать, как лучше это сделать - 

<script type="text/javascript">
//<![CDATA[
var A = {
    "test" : function(loc) {
        $.ajax({
            ..
            success : function(res) {
                ..
**** >          history.pushState(null, null, loc);
            }
        });
    }
};

$(document).ready(function() {
    window.setTimeout(function() {
        window.addEventListener("popstate", function(e) {
++++ >      A.test(location.href);
        }, false);
    }, 1);
});
//]]>
</script>

В приведенном выше коде каждый раз вызывался history.pushState() (строка помечена **), местоположение былоправильно вставлен в стек.Когда popstate был вызван в результате нажатия кнопки возврата в браузере (строка отмечена ++++), он работал нормально с первого раза, но при этом он снова вызывал history.pushState(), выдвигая новый loc в стеке.снова по кругу.Итак, если я перешел из A -> B -> C, у меня были A, B и C в стеке.Когда я нажал назад, я вернулся к B, но при этом я снова толкнул B в стек.Нажатие назад теперь означало, что я снова вернусь к B и попаду в этот цикл.

Я изменил приведенный выше код, как показано ниже, и теперь он работает 

<script type="text/javascript">
//<![CDATA[
var A = {
    "test" : function(loc, how) {
        $.ajax({
            ..
            success : function(res) {
                ..
                if (how !== "back") {
**** >              history.pushState(null, null, loc);
                }
        });
    }
};

$(document).ready(function() {
    window.setTimeout(function() {
        window.addEventListener("popstate", function(e) {
++++ >      A.test(location.href, "back");
        }, false);
    }, 1);
});
//]]>
</script>

Какя могу сделать выше, лучше?

...