學習歷史API

Question

在http: //diveintohtml5.info/history.html 的文章之后，我正在嘗試了解歷史 API。 我的簡單測試 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>

幾乎一切都運作良好。 當我點擊一個鏈接時，URL 被正確更改，新的頁面片段通過 ajax 從服務器獲取，並插入正確的位置。

不能正常工作的是瀏覽器的后退按鈕。 或者，更確切地說，它是第一次起作用，而不是在那之后。 所以，如果我點擊“foo”，然后點擊“bar”，然后點擊“baz”，然后點擊“qux”，然后我點擊瀏覽器的返回按鈕，我 go 從“qux”返回到“baz”。 但是，在那之后，無論我點擊瀏覽器后退按鈕多少次，它都會保持在“baz”上，而不是回溯到“bar”然后再到“foo”。

我究竟做錯了什么？ （此時我不想要 jQuery 插件的建議。我只是想了解我的方式的錯誤）。

Answer 1

弄清楚了為什么我的代碼無法正常工作，並且還想出了一個 hacky 解決方法。 但是，我仍然很想學習更好的方法來做到這一點——

<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 推入了堆棧。 現在按下意味着我將再次 go 回到 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>

我怎樣才能更好地完成上述工作？

學習歷史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