HTML5 history.pushState()和history.replaceState()新增、修改歷史記錄用法介紹

時間 2019-12-09

標籤 html5 html history.pushstate history pushstate history.replacestate replacestate 新增修改歷史記錄用法介紹欄目 HTML5 简体版

原文原文鏈接

抽空研究了下這兩個新方法，確實能夠解決不少問題html

一、使用pushState()方法能夠控制瀏覽器自帶的返回按鈕:api

有時候咱們想讓用戶點擊瀏覽器返回按鈕時，不返回，或執行其餘操做，這時，就用到history.pushState()方法瀏覽器

講解：post

history.pushState(data,title,url) //每執行一次都會增長一條歷史記錄，瀏覽器在返回時，就不會返回前一個頁面了，url

data：要設置的history.state的值，能夠是任意類型的值，可根據此值進行判斷執行想要的操做。spa

title：如今大多數瀏覽器不支持或者忽略這個參數，最好用null代替。3d

url：地址欄的值，若不須要可用空來代替。code

// 監聽瀏覽器的前進後退事件：htm


     window.addEventListener("popstate", function() {
        // 取出 設置好的 history.state 值，作判斷

     });

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <button class="btn" onclick="btnFun();">點擊新增一條歷史記錄</button>
    </div>
    <script>
        console.log('增長曆史記錄前 state的值：',history.state); // null
function btnFun() {//點擊事件
// 增長一個歷史記錄
history.pushState('a',null,'2.html?b=1');
            console.log('增長曆史記錄後 state的值：',history.state); // a
};
        window.addEventListener('popstate',function() {
            var state = history.state;//取出state值
//注意：在此處時（點擊後退按鈕時），state的值已經爲null
            // （由於返回時歷史記錄會被刪除，瀏覽器動做）
console.log('點擊後退按鈕後 state的值：',state); // null
            //判斷，想要執行的操做
});
    </script>
</body>
</html>

二、history.replaceState() 與pushState()功能相似，除了這點：對象

replaceState()是用來修改當前的歷史記錄(history實體)，而不是建立一個新的歷史記錄，因此，當執行完history.replaceState()後，點擊返回按鈕照樣會返回上一個一面。當須要更新一個state對象或者當前history實體時，能夠用replaceState()來實現。

用法：當在a頁面使用replaceState()修改了歷史記錄後，跳轉到b頁面，後退到a頁面時，歷史記錄就是修改過的。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <button class="btn" onclick="btnFun();">點擊修改本頁歷史記錄</button>
    </div>
    <br/>
    <div>
        <a href="b.html">點擊跳轉到b頁面</a>
    </div>
    <script>

        function btnFun() {//點擊事件
history.replaceState('a',null,'a.html?a=1');
            console.log('修改歷史記錄後 state的值：',history.state); // a
};
    </script>
</body>
</html>

點擊跳轉到b頁面後，執行返回操做

回到a頁面，url中?a=1還存在，咱們能夠利用這個參數在頁面中執行一些操做，好比列表的選中