堆棧內存溢出
  簡體   English   中英

使用HTML5歷史記錄的“后退”按鈕只能使用一次

[英]Back button using HTML5 history works only once

 原文  2018-03-31 03:23:58  0   1    javascript/ nginx/ back-button/ browser-history/ html5-history

問題描述

我正在嘗試為單頁應用程序中的“后退”按鈕構建一個僅使用JavaScript的HTML5的簡單實現。

第一步，我有一個可以工作的骨骼原型，但是只有一次-當我進入1> 2> 3，然后從3按下時，它回到2好了，但是無論多少次，它都停留在2我按返回按鈕。 在所有瀏覽器中，行為始終是相同的，因此，我確定這必須是我的邏輯，但是即使經過多次嘗試，我也無法弄清到底是什么。 此外，前進按鈕似乎也被禁用。

為了簡要說明，我有三個（隱藏的）div，每個都有一個（可見的）“說明”，單擊可打開實際的div。 頁面加載時，只有描述是可見的，沒有內容。 當用戶單擊任何一個div的描述時，該div就會顯示，其余的/將保持隱藏狀態。

該站點位於nginx服務器的后面，該服務器通過以下指令將所有內容傳遞到首頁： 

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

由於它相對簡單，並且可以直接復制粘貼以復制，因此我將所有內容都粘貼在這里。 已經有計數器變量和許多console.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>

1 個解決方案

解決方案1
 0  2018-03-31 05:57:10

好的，經過多輪調試和沉思，我弄清楚了什么是壞的。

show_div函數都將狀態推送到歷史記錄中。 因此，當popstate事件處理程序調用js_route函數時，它將調用正確的歷史記錄，然后將相同的狀態推回到歷史記錄中。 因此，當從1> 2> 3轉到3時，返回到2，又將2推入歷史記錄-因此再次返回將彈出歷史記錄中最新的狀態，即現在為2。在任何其他popstate事件上循環播放。

解決此問題的方法是創建一組新的函數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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 HTML5歷史記錄，后退按鈕和外部鏈接 HTML5歷史記錄API后退按鈕 后退按鈕只能工作一次 HTML5歷史記錄 - 返回上一頁的完整頁面按鈕？ HTML5 Projekktor Video Player只能播放/播放一次 jQuery Func僅在HTML5自動對焦后有效 如何使用HTML5歷史記錄使前進按鈕在此示例上起作用？ 該按鈕只能使用一次 如何退回到HTML5 Canvas歷史記錄 HTML5歷史記錄pushState鏈接返回
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM