圖解用HTML5的popstate如何玩轉瀏覽器歷史記錄

jopen 9年前發布 | 21K 次閱讀 HTML5 前端技術

一、popstate用來做什么的？

簡而言之就是HTML5新增的用來控制瀏覽器歷史記錄的api。

二、過去如何操縱瀏覽器歷史記錄？

window.history對象，該對象上包含有length和state的兩個值，在它的__proto__上繼承有back、forward、go等幾個功能函數

在popstate之前，我們可以利用back、forward、go對history進行后退和前進操作。

例如：

history.back(); (后退一步，使用history.go(-1)也可實現后退效果)

弊端：只能操作前進后退，但是無法控制前進后要去哪，history.length都只會維持原來的狀態

三、popstate的怎么用？

HTML5的新API擴展了window.history，使歷史記錄點更加開放了。可以存儲當前歷史記錄點pushState、替換當前歷史記錄點replaceState、監聽歷史記錄點popstate。

pushState、replaceState兩者用法差不多。

使用方法：

history.pushState(data,title,url);
//其中第一個參數data是給state的值；第二個參數title為頁面的標題，但當前所有瀏覽器都忽略這個參數，傳個空字符串就好；第三個參數url是你想要去的鏈接；

replaceState用法類似，例如：history.replaceState("首頁","",location.href+ "#news");

兩者區別：pushState會改變history.length，而replaceState不改變history.length

通過下圖我們可以對比看出pushState和replaceState的差別（注意看history.length的變化）：

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>圖解用HTML5的popstate如何玩轉瀏覽器歷史記錄</title>
</head>
<body>


<span class="js-news">新聞</span>
<span class="js-music">音樂</span>
<script>

    var locationHref = location.href;
    document.addEventListener("click", function (event) {
        var target = event.target;
        if (target.className == "js-news") {
            history.pushState("首頁", "", locationHref + "#news");
        } else if (target.className == "js-music") {
            history.pushState("音樂", "", locationHref + "#music");
        }
    });

    /*    document.addEventListener("click",function(event){
     var target = event.target;
     if(target.className == "js-news"){
     history.replaceState("首頁","",locationHref + "#news");
     }else if(target.className == "js-music"){
     history.replaceState("音樂","",locationHref + "#music");
     }
     });*/

    window.addEventListener("popstate", function () {
        console.log(history.state);
    })
</script>
</body>
</html>

View Code