使用HTML5历史记录的返回按钮仅工作一次

我正在尝试为单页应用程序中的返回按钮构建一个简单的JavaScript仅限HTML5实现。

作为第一步，我有一个有效的骨骼原型，但是只有一次 - 当我走1> 2> 3，然后从3开始，然后再回到2个，但无论如何都将其固定在2我按下后面按钮多次。行为始终是相同的，并且在浏览器之间，所以我确信它一定是我的逻辑，但是即使经过许多尝试，我也无法弄清楚什么是损坏的。此外，向前按钮似乎也被停用了。

简短地解释它，我有三个(隐藏(divs，每个divs都有一个(可见的("描述"，单击打开实际div的单击。当页面加载时，只有描述是可见的，而没有内容。当用户单击任何一个div的描述时，该div显示，其余的是/仍然隐藏。

该网站是Nginx服务器的后面，该服务器将所有内容都传递到主页，并带有诸如：

的指令。

location /div1{
        proxy_pass https://192.168.43.220:8765/;
    }

由于它相对简单，并且可以直接复制粘贴以复制，所以我正在在这里粘贴所有内容的自由。已经有反变量和许多控制台。logs，因此应该使试图修复它的人更容易。

我也很感激任何解释为什么这不起作用。

<html>
<head>
</head>
<body>
    <b href="#div1" onclick=show_div1()>DIV1</b>
    <b href="#div2" onclick=show_div2()>DIV2</b>
    <b href="#div3" onclick=show_div3()>DIV3</b>
    <div id="div1">
        <p>This is div number 1</p>
    </div>
    <div id="div2">
        <p>This is div number 2</p>
    </div>
    <div id="div3">
        <p>This is div number 3</p>
    </div>
</body>
<script>
    document.addEventListener("DOMContentLoaded", function(event){
        on_page_load();
    });
    function on_page_load(){
        document.getElementById("div1").style.display="none";
        document.getElementById("div2").style.display="none";
        document.getElementById("div3").style.display="none";
        var p = window.location.pathname.split("/")[1];
        console.log("on page load, pathname: " + p);
        history.pushState({url: p}, null, p);
        console.log("js routing to: " + p);
        js_route(p);
        n1 = 0; n2 = 0; n3 = 0;
    }
    function show_div1(){
        document.getElementById("div1").style.display="block";
        document.getElementById("div2").style.display="none";
        document.getElementById("div3").style.display="none";
        n1 = n1 + 1;
        console.log("showing div1 for " + n1 + "th time");
        history.pushState({url: 'div1', n: n1}, null, "div1");
    }
    function show_div2(){
        document.getElementById("div2").style.display="block";
        document.getElementById("div1").style.display="none";
        document.getElementById("div3").style.display="none";
        n2 = n2 + 1;
        console.log("showing div2 for " + n2 + "th time");
        history.pushState({url: 'div2', n: n2}, null, "div2");
    }
    function show_div3(){
        document.getElementById("div3").style.display="block";
        document.getElementById("div2").style.display="none";
        document.getElementById("div1").style.display="none";
        n3 = n3 + 1;
        console.log("showing div3 for " + n3 + "th time");
        history.pushState({url: 'div3', n: n3}, null, "div3");
    }
    window.onpopstate = function(event) {
        var popped_url = event.state.url;
        var popped_n = event.state.n;
        console.log("popstate url: " + popped_url);
        console.log("onpopstate, routing to: " + window.location.pathname + " and n is " + popped_n);
        js_route(popped_url);
        //js_route(window.location.pathname.split("/")[1]);
    }
    function js_route(path){
        switch(path){
            case "div1":
                show_div1();
                break;
            case "div2":
                show_div2();
                break;
            case "div3":
                show_div3();
        }
    }
</script>

好吧，经过更多的调试和沉思，我弄清楚了什么破裂。

show_div的功能全部将状态推入历史记录。因此，当popstate事件处理程序调用js_route函数时，它调用正确的历史记录，然后将相同的状态推回历史记录。因此，当从1> 2> 3开始时，然后从3回到2，但也将2再次推向历史 - 因此，再次回去将弹出现在的历史上最新状态。因此创建一个无限在任何其他流行病事件上循环。

解决此问题的方法是创建一组新的函数-show_div_hist，它与show_div函数相同，但不要将任何内容推入历史记录。同样，一个新路由器js_route_history，它与js_route函数相同，但可以调用上述show_div_hist函数。

就是这样。效果很好。

<html>
    <head>
    </head>
    <body>
        <b href="#div1" onclick=show_div1()>DIV1</b>
        <b href="#div2" onclick=show_div2()>DIV2</b>
        <b href="#div3" onclick=show_div3()>DIV3</b>
        <div id="div1">
            <p>This is div number 1</p>
        </div>
        <div id="div2">
            <p>This is div number 2</p>
        </div>
        <div id="div3">
            <p>This is div number 3</p>
        </div>
    </body>
    <script>
        document.addEventListener("DOMContentLoaded", function(event){
            on_page_load();
        });
        function on_page_load(){
            document.getElementById("div1").style.display="none";
            document.getElementById("div2").style.display="none";
            document.getElementById("div3").style.display="none";
            document.getElementById("div4").style.display="none";
            var p = window.location.pathname.split("/")[1];
            console.log("on page load, pathname: " + p);
            history.pushState({url: p}, null, p);
            console.log("js routing to: " + p);
            js_route(p);
            n1 = 0; n2 = 0; n3 = 0;
        }
        function show_div1(){
            document.getElementById("div1").style.display="block";
            document.getElementById("div2").style.display="none";
            document.getElementById("div3").style.display="none";
            document.getElementById("div4").style.display="none";
            n1 = n1 + 1;
            //console.log("showing div1 for " + n1 + "th time");
            history.pushState({url: 'div1', n: n1}, null, "div1");
        }
        function show_div1_hist(){
            document.getElementById("div1").style.display="block";
            document.getElementById("div3").style.display="none";
            document.getElementById("div2").style.display="none";
            document.getElementById("div4").style.display="none";
//          n1 = n1 + 1;
//          console.log("showing div1 for " + n1 + "th time");
//          history.pushState({url: 'div1', n: n1}, null, "div1");
        }
        function show_div2(){
            document.getElementById("div2").style.display="block";
            document.getElementById("div1").style.display="none";
            document.getElementById("div3").style.display="none";
            document.getElementById("div4").style.display="none";
            n2 = n2 + 1;
            //console.log("showing div2 for " + n2 + "th time");
            history.pushState({url: 'div2', n: n2}, null, "div2");
        }
        function show_div2_hist(){
            document.getElementById("div2").style.display="block";
            document.getElementById("div1").style.display="none";
            document.getElementById("div3").style.display="none";
            document.getElementById("div4").style.display="none";
//          n2 = n2 + 1;
//          console.log("showing div2 for " + n2 + "th time");
//          history.pushState({url: 'div2', n: n2}, null, "div2");
        }

        function show_div3(){
            document.getElementById("div3").style.display="block";
            document.getElementById("div2").style.display="none";
            document.getElementById("div4").style.display="none";
            document.getElementById("div1").style.display="none";
            n3 = n3 + 1;
            //console.log("showing div3 for " + n3 + "th time");
            history.pushState({url: 'div3', n: n3}, null, "div3");
        }
        function show_div3_hist(){
            document.getElementById("div3").style.display="block";
            document.getElementById("div2").style.display="none";
            document.getElementById("div1").style.display="none";
            document.getElementById("div4").style.display="none";
//          n3 = n3 + 1;
//          console.log("showing div3 for " + n3 + "th time");
//          history.pushState({url: 'div3', n: n3}, null, "div3");
        }
        window.onpopstate = function(event) {
            event.preventDefault();
            var popped_url = event.state.url;
            var popped_n = event.state.n;
            console.log("popstate url: " + popped_url);
            console.log("onpopstate, routing to: " + window.location.pathname + " and n is " + popped_n);
            js_route_hist(popped_url);
            //js_route(window.location.pathname.split("/")[1]);
        }
        function js_route(path){
            switch(path){
                case "div1":
                    show_div1();
                    break;
                case "div2":
                    show_div2();
                    break;
                case "div3":
                    show_div3();
            }
        }
        function js_route_hist(path){
            switch(path){
                case "div1":
                    show_div1_hist();
                    break;
                case "div2":
                    show_div2_hist();
                    break;
                case "div3":
                    show_div3_hist();
            }
        }
    </script>
</html>

相关内容

最新更新

热门标签：