Question

我正在尝试使用后退按钮进行ajax工作，并且缺少一些重要的东西。存储上一页状态的位置在哪里？

案例1：

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

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

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

案例2：

点击“让我红了”。发生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>

Answer 1

不要使用JavaScript来驱动您的网址，而是让您的网址驱动您的JavaScript。让window.onhashchange事件处理程序完成所有工作。其他一切都应该改变哈希。

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

<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事件只会简化事情。

Answer 2

使用AJAX时，使用history.pushState

手动更新历史记录非常重要

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

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

Ajax和后退按钮。散列更改，但前一页状态存储在哪里？

2 个答案: