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

時間 2019-11-18

標籤圖解 html5 html popstate 如何瀏覽器歷史記錄欄目 HTML5 简体版

原文原文鏈接

1、popstate用來作什麼的？
簡而言之就是HTML5新增的用來控制瀏覽器歷史記錄的api。html

2、過去如何操縱瀏覽器歷史記錄？
window.history對象，該對象上包含有length和state的兩個值，在它的__proto__上繼承有back、forward、go等幾個功能函數
在popstate以前，咱們能夠利用back、forward、go對history進行後退和前進操做。
例如：
history.back(); (後退一步，使用history.go(-1)也可實現後退效果)
弊端：只能操做前進後退，可是沒法控制前進後要去哪，history.length都只會維持原來的狀態api

3、popstate的怎麼用？
HTML5的新API擴展了window.history，使歷史記錄點更加開放了。能夠存儲當前歷史記錄點pushState、替換當前歷史記錄點replaceState、監聽歷史記錄點popstate。瀏覽器

pushState、replaceState二者用法差很少。ide

使用方法：函數

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

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

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

經過下圖咱們能夠對比看出pushState和replaceState的差異（注意看history.length的變化）：code

<!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

4、監聽瀏覽器狀態（popstate）變化事件
能夠理解爲監聽瀏覽器後退、前進的操做，只要後退或者前進就會觸發。在上面的demo中，咱們預先作了以下操做：打開頁面→點擊「新聞」→點擊「音樂」→再點擊「新聞」，產生了4個history記錄。而後監聽瀏覽器後退和前進的狀態變化，以下圖所示：htm