12

我正在尝试使 ajax 与后退按钮一起工作，但缺少一些中心内容。以前的页面状态存储在哪里？

情况1：

点击“让我变红”。ajax 事件发生，页面变红。哈希 = #red

点击“让我变黄”。ajax 事件发生，页面变黄。哈希 = #黄色

单击返回按钮。哈希现在回到#red。但我也希望页面是红色的。还是黄色的。

案例二：

点击“让我变红”。ajax 事件发生，页面变红。哈希 = #red

单击“转到其他站点”。它去了谷歌。

单击返回按钮。我们回到站点，hash = #red，但我也希望页面是红色的！

<!DOCTYPE html>
<html>
<style>
    .red{background:red}
    .yellow{background:yellow}
</style>
<head>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $('.ajax_thing').click(function(){
            location.hash=$(this).attr('action_type');
            return false
        })
        var originalTitle=document.title
        function hashChange(){
            var page=location.hash.slice(1)
            if (page!=""){
                $('#content').load(page+".html #sub-content")
                document.title=originalTitle+' – '+page
            }
        }
        if ("onhashchange" in window){ // cool browser
            $(window).on('hashchange',hashChange).trigger('hashchange')
        }else{ // lame browser
            var lastHash=''
            setInterval(function(){
                if (lastHash!=location.hash)
                    hashChange()
                lastHash=location.hash
            },100)
        }
    })

    </script>
</head>
<body>
<menu>
       <li><a class="ajax_thing" id = "red_action" action_type="red">Make me red</a></li>
        <li><a class="ajax_thing" id = "yellow_action" action_type="yellow">Make me yellow</a></li>
</menu>
        <li><a href = "http://www.google.com">Go to other site</a></li>
</body>
</html>
<script>

$("#red_action").click(function(e) {
  // ajax here. on success:
    $("body").removeClass("yellow");
    $("body").addClass("red");
})

$("#yellow_action").click(function(e) {
  // ajax here. on success:
    $("body").removeClass("red");
    $("body").addClass("yellow");
})

</script>
4

2 回答 2

13

与其使用你的 JavaScript 来驱动你的 URL，不如让你的 URL 驱动你的 JavaScript。让window.onhashchange事件处理程序完成所有工作。其他一切都应该改变哈希。

您甚至不需要链接的点击处理程序，只需将 url 设置为正确的哈希：

<a href="#red">Red</a>

然后，您的hashchange处理程序会处理剩下的事情：

function hashChange() {
    var page = location.hash.slice(1);
    if (page) {
        $('#content').load(page+".html #sub-content");
        document.title = originalTitle + ' – ' + page;
        switch (page) {
            // page specific functionality goes here
            case "red":
            case "yellow":
                $("body").removeClass("red yellow").addClass(page);
                break;
        }
    }
}

完全更改哈希的唯一原因是，如果您希望能够返回页面并让它根据 URL 加载相同的状态。所以，你已经有了让 URL 驱动 JavaScript 的需求，对吧？否则你为什么要更改哈希？将功能从点击处理程序中移出并移入hashchange事件只会简化事情。

于 2013-07-21T08:29:05.180 回答
6

使用 AJAX 时，使用 history.pushState 手动更新历史记录很重要

然后为 onpopstate 事件创建一个函数测试并根据需要更新内容。

https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history

于 2013-07-21T07:20:53.517 回答