html单页应用返回的实现方法

晋无

于 2022-12-29 13:30:18 发布

阅读量522

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/qq_44905857/article/details/128480337

版权

总体思路：每次新显示div时将其特征id压入history中，返回时将当前的history.state所代表的div的display设为none,再调用history.back函数，将之后的history.state所代表的div的display设为block，实现类似返回的效果。

理解history相关知识内容有助于理解本文内容：https://www.bbsmax.com/A/amd0o6W5ge/

实验代码如下：
元素（三个div代表三个不同页面，四个按钮前三个对应显示三个div，后一个点击后返回）：

<div id="d1" class="te" style="background-color: aliceblue;">1</div>
    <div id="d2" class="te" style="background-color: aquamarine;">2</div>
    <div id="d3" class="te" style="background-color: bisque;">3</div>
    <button onclick="d1t()">d1 op</button>
    <button onclick="d2t()">d2 op</button>
    <button onclick="d3t()">d3 op</button>
    <button onclick="backt()">back</button>

样式：

.te{
            width: 200px;
            height: 500px;
            position: absolute;
            top: 10px;
            right: 10px;
            display: none;
        }

js代码：

 var a=document.getElementById('d1');
        var b=document.getElementById('d2');
        var c=document.getElementById('d3');
        function d1t(){
            a.style.display='block';
            b.style.display='none';
            c.style.display='none';
            window.history.pushState({'id':'a'},'','#a');
        }
        function d2t(){
            b.style.display='block';
            c.style.display='none';
            a.style.display='none';
            window.history.pushState({'id':'b'},'','#b');
        }
        function d3t(){
            c.style.display='block';
            b.style.display='none';
            a.style.display='none';
            window.history.pushState({'id':'c'},'','#c');
        }
        function backt(){
            if(history.state){
                switch(history.state.id){
                    case 'a':
                    a.style.display = 'none';
                    break;
                    case 'b':
                    b.style.display = 'none';
                    break;
                    case 'c':
                    c.style.display = 'none';
                    break;
                }
            }
            console.log(history.state);
            history.back();
            console.log(history.length);
            
        }
        window.addEventListener('popstate', function(e){
        if (e.state && e.state.id === 'a') {
            a.style.display = 'block';
        } else if (e.state && e.state.id === 'b') {
            b.style.display = 'block';
        } else if (e.state && e.state.id === 'c') {
            c.style.display = 'block';
        } else if(e.state==null){
            console.log("over");
            a.style.display = 'none';
            c.style.display = 'none';
            b.style.display = 'none';
        }
      })