学习历史API

Question

I am trying to learn the history API following the write-up at http://diveintohtml5.info/history.html .在http: //diveintohtml5.info/history.html 的文章之后，我正在尝试了解历史 API。 My simple test web page is as follows我的简单测试 web 页面如下

<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>

Almost everything works well.几乎一切都运作良好。 When I click on a link, the URL is changed correctly, the new page fragments are fetched from the server via ajax, and inserted in the correct location.当我点击一个链接时，URL 被正确更改，新的页面片段通过 ajax 从服务器获取，并插入正确的位置。

What doesn't work well is the browser back button.不能正常工作的是浏览器的后退按钮。 Or, rather, it works the first time, and not after that.或者，更确切地说，它是第一次起作用，而不是在那之后。 So, if I click on "foo" and then "bar" and then "baz" and then "qux" and then I hit the browser back button, I go back from "qux" to "baz".所以，如果我点击“foo”，然后点击“bar”，然后点击“baz”，然后点击“qux”，然后我点击浏览器的返回按钮，我 go 从“qux”返回到“baz”。 But, after that, no matter how many times I click on the browser back button, it remains on "baz" instead of backtracking to "bar" and then to "foo".但是，在那之后，无论我点击浏览器后退按钮多少次，它都会保持在“baz”上，而不是回溯到“bar”然后再到“foo”。

What am I doing wrong?我究竟做错了什么？ (I don't want suggestions for jQuery plugins at this point. I simply want to understand the error of my ways). （此时我不想要 jQuery 插件的建议。我只是想了解我的方式的错误）。

Answer 1

figured out why my code was not working, and also figured out a hacky workaround.弄清楚了为什么我的代码无法正常工作，并且还想出了一个 hacky 解决方法。 But, am still curious to learn better ways to do this --但是，我仍然很想学习更好的方法来做到这一点——

<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>

In the code above, everytime history.pushState() was called (line marked * *), the location was correctly pushed into the stack.在上面的代码中，每次调用history.pushState() （行标记为* *）时，该位置都被正确地推入堆栈。 When popstate was called as a result of pressing the browser back button (line marked ++++), it worked fine the first time, but in doing so, it once again called history.pushState() pushing the new loc in the stack again in a circular fashion.当由于按下浏览器后退按钮（标记为 ++++ 的行）而调用popstate时，它第一次运行良好，但这样做时，它再次调用history.pushState()将新 loc 推入堆栈再次以循环方式。 So, if I moved from A -> B -> C, I had A, B and C in the stack.所以，如果我从 A -> B -> C 移动，我在堆栈中有 A、B 和 C。 When I pressed back, I went back to B, but in doing so, I pushed B into the stack again.当我按回时，我又回到了 B，但这样做时，我又将 B 推入了堆栈。 Pressing back now meant that I would once again go back to B, and be caught in this loop.现在按下意味着我将再次 go 回到 B，并陷入这个循环。

I modified the above code to as below, and now it works我将上面的代码修改为如下，现在它可以工作了

<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>

How can I do the above better?我怎样才能更好地完成上述工作？

学习历史API

问题描述

1 个解决方案

解决方案1
1 2011-06-05 21:26:11

学习历史API

问题描述

1 个解决方案

解决方案1 1 2011-06-05 21:26:11

解决方案1
1 2011-06-05 21:26:11