个人中心
gpt4 book ai didi

javascript - Ajax 和后退按钮。哈希值发生变化，但之前的页面状态存储在哪里？

转载 作者：可可西里 更新时间：2023-11-01 02:03:14 25 4
gpt4 key购买 nike

我试图让 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>

最佳答案

与其使用您的 JavaScript 驱动您的网址，不如让您的网址驱动您的 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 事件中只会简化事情。

关于javascript - Ajax 和后退按钮。哈希值发生变化，但之前的页面状态存储在哪里？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17769884/

25 4 0
文章推荐： ios - 想要在 10 天后触发一个事件
文章推荐： swift - 错误 : '...' is not a prefix unary operator
文章推荐： java - SSE 发射器 : Manage timeouts and complete()
文章推荐： ios - 在 swift 中无法使用 MICountry 选择器的 dial_code
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com