GeXiangDong

精通Java、SQL、Spring的拼写，擅长Linux、Windows的开关机

0%

javascript 控制浏览器的前进后退操作

发表于 更新于

在单页面应用中，为了利用浏览器的后退/前进按钮，可以通过改变地址栏为#foo 和 onhashchange 事件一起来控制。但这有个缺点：在一个树形网站结构中点来点去时，浏览器并不会按照我们需要的返回上一级，而只是返回前一个看的页面，特别是在提交表单后，点返回又到了表单页。

HTML5提供了一种解决办法，可以通过window.history.pushState等方法来实现。

下面是例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport"  content="width=device-width"/>
<style type="text/css">
    #content div{text-align:center; padding-top:20px;}
</style>
<script>
    var visitHistory = [];
    var currentPage = null;
 
    window.onload = function() {
        var homePage = {"id":"index", params:{}}; //id是主要部分，不同类型页面不重复；params用于记录页面需要的参数，方面返回时重新描画页面用
        window.history.pushState(visitHistory, homePage, "#");
        gotoPage(homePage);
    }
 
    function gotoPage(page){
        for(var i = 0; i < visitHistory.length; i++){
            if(visitHistory[i].id == page.id){
                //exists, delete items after this
                while(visitHistory.length > i){
                    visitHistory.pop();
                }
                currentPage = null; //如果进入已存路径上页面，则当前页面不用保存了
                break;
            }
        }
 
        if(currentPage != null){
            visitHistory.push(currentPage);
        }
        currentPage = page;
 
        window.history.replaceState(visitHistory, page.id, "#");
        showPage(page);
    }
 
    window.onpopstate = function() {
        if (visitHistory.length > 0) {
            currentPage = visitHistory.pop();
            window.history.pushState(visitHistory, currentPage.id, "#"); // + pg);
            showPage(currentPage);
        } else {
            //No "history" - let them exit or keep them in the app.
            showMessage("no history, exit or leave with no action.");
 
        }
    }
 
    /**
     * 这个是具体的描画页面的函数，根据需要改写
     * page参数类型时JSON，例如：{"id":"index", params:{}}
     */
    function showPage(page){
        var id = page.id;
        document.getElementById("title").innerHTML = id;
        var pathHTML = '<a href="javascript:gotoPageId(\'index\')">Home</a> &gt; ';
        var contentHTML = '<div style="border:1px solid #999;background-color:#DDD;width:200px;height:50px;border-radius:5px;" onclick="gotoPageId(\'1\');">goto 1</div>';
 
        if(id == "1"){
            pathHTML += '<a href="javascript:gotoPageId(\'1\')">1</a>  ';
            contentHTML = '<div style="border:1px solid #999;background-color:#DDD;width:200px;height:50px;border-radius:5px;" onclick="gotoPageId(\'1.1\');">goto 1.1</div>';
        }else if(id == '1.1'){
            pathHTML += '<a href="javascript:gotoPageId(\'1\')">1</a> &gt; ';
            pathHTML += '<a href="javascript:gotoPageId(\'1.1\')">1.1</a>  ';
            contentHTML = '<div style="border:1px solid #999;background-color:#DDD;width:200px;height:50px;border-radius:5px;" onclick="gotoPageId(\'1.1.1\');">goto 1.1.1</div>';
        }else if(id == '1.1.1'){
            pathHTML += '<a href="javascript:gotoPageId(\'1\')">1</a> &gt; ';
            pathHTML += '<a href="javascript:gotoPageId(\'1.1\')">1.1</a> &gt; ';
            pathHTML += '<a href="javascript:gotoPageId(\'1.1.1\')">1.1.1</a>  ';
            contentHTML = 'no child page.';
        }
 
        document.getElementById("path").innerHTML = pathHTML;
        document.getElementById("content").innerHTML = contentHTML;
 
        showMessage("showPage---" + id);
    }
 
    /**
     * 这个函数是供showPage函数例子中链接用的，实际根据需要写或不写
     */
    function gotoPageId(id){
        gotoPage({"id":id, "params":{}});
    }
    /**
     * window.history.pushState 不会触发onHashChange事件了，下面这个函数/事件无意义
     */
    window.onhashchange = function(){
        document.getElementById("addressbar").innerHTML = "hashchange:" + window.location.href;
    }
    /**
     * 供测试用的函数
     */
    function showMessage(msg){
        document.getElementById("msg").innerHTML += "<br>" + msg;
    }  
</script>
</head>
<body>
    <h1 id="title" style="text-align:center;">none</h1>
    <div id="path"></div>
 
    <div id="content" style="padding:20px;">
    </div>
 
    <div id="msg" style="border:1px solid #333;margin:10px; min-height:300px">
    </div>
    <div id="addressbar" style="border:1px solid #666">none</div>
 </body>

IOS 9以上开始支持（IOS8不支持）