瀏覽器瀏覽記憶（history）幾則技巧記錄

時間 2019-11-30

原文原文鏈接

通常瀏覽記錄模式

假設有三個頁面， start.html，經過點擊start.html上的連接跳轉到 first.html，而後點擊first.html上連接跳轉到 second.html, 那麼在history中記錄的歷史以下鏈表：javascript

以下代碼例子，頁面跳轉均以連接實現。php

start.htmlhtml

<html>
<head> 
        <style>

        </style>
</head> 
<body>
         <a href="./first.html">go to first html</a>
</body>
</html>

first.htmljava

<html>
<head> 
        <style>

        </style>
</head> 
<body>
         <a href="./second.html">go to second html</a>
</body>
</html>

second.html瀏覽器

<html>
<head> 
        <style>

        </style>
</head> 
<body>
         here is second html
</body>
</html>

某個頁面被瀏覽事後，在history中被替換

對於一種特殊場景，此頁面用戶看完後，不想讓用戶再看到，例如特定頁面上，讓用戶選擇一個條件，此選擇是一次性的，不能讓用戶屢次選擇, 點擊回退按鈕不顯示此頁面.post

使用 location.replace接口, 實現代碼以下， first.html頁面點擊鏈接後，跳轉到second.html， first.html頁面在history中被second.html代替。測試

瀏覽到 first.html history記錄url

從first.html跳轉到 second.html後， history記錄spa

這樣，當前顯示second，點擊回退按鈕，回退到start頁面。code

實例代碼，其餘兩個不變。

first.html

<html>
<head>
        <style>

        </style>
</head>
<body>
     <a id="go2scond" href="#" onclick="go2second();">go to second html</a>
         <script type="text/javascript">
            function go2second()
            {
                location.replace("./second.html");
            }
         </script> 
</body>
</html>

某個頁面以前的全部頁面不能再被瀏覽

若是某個頁面以前的頁面是一次性顯示，對於用戶來講不能再被顯示，例如當用戶選擇了因此後的內容後，在最後一步確認後，不能再被修改，用戶企圖經過瀏覽器回退按鈕從新查看以前的頁面，這中條件下，想法讓其失效。

history對象，沒有提供清空以前瀏覽頁面的接口，此需求能夠經過js腳本判斷實現：

例以下面demo，用戶從start.html瀏覽到 first.html頁面，後瀏覽到second.html，而後用戶點擊回退仍然顯示 second.html

修改first.html代碼以下

具體實現原理是，在以前不能瀏覽頁面中的最後一一個頁面腳本中，添加history.forward（1）, 讓其向後自動跳轉到後面一個頁面，對於第一次訪問此頁面，因爲沒有後面一個頁面，因此不會執行，當瀏覽到後一個頁面後，這時此頁面在history中就有了後一個頁面，經過後退按鈕，當加載此頁面時候，就會自動跳轉到後一個頁面。

<html>
<head>
        <style>

        </style>
</head>
<body>
         <a href="./second.html">go to second html</a>
            <script>
            //HTML禁用回退上一瀏覽頁面按鈕
            /*
            加入有以上代碼的頁面沒法回退到它
                例如A頁面有這段代碼，從A連接到B頁面，這時一旦在B頁面上按回退按鈕，則沒法回退到A頁面
            */
            if(window.history.forward(1) != null)
            {

            }

            </script>

</body>
</html>

瀏覽歷史（前進和後退）與刷新的差異

瀏覽歷史（前進和後退），僅僅加載已經訪問過頁面的 URL，若是其中有一個頁面是以 form 表單 post 方法提交後顯示的，瀏覽歷史也僅僅是加載此頁面的url，並不提交 post的數據。

刷新，若是有個頁面是以提交數據顯示的，則刷新會提示用戶，是否要重複提交數據：

demo測試代碼：

start.php form提交數據到 first.php

<html>
<head> 
        <style>

        </style>
</head> 
<body>
    <form action="./first.php" method="post">
        <input type="text" name="para" id="para" value="para" />
        <input type="submit" value="submit" />
    </form>
</body>
</html>

first.php是被提交數據後顯示的，使用刷新則會提示是否要重複提交數據。點擊回退和前進，都沒有重複提交數據提示。

<html>
<head> 
        <style>

        </style>
</head> 
<body>
         <a href="./second.php">go to second html</a>
</body>
</html>

second.php

<html>
<head> 
        <style>

        </style>
</head> 
<body>
         here is second html
</body>
</html>

經過改造，在first.php中添加 302 跳轉，直接跳轉到 second，能夠避免用戶看到數據提交的頁面 first.php，同時嘗試前進和後退按鈕，也不能瀏覽到first.php，說明在history中不會記錄跳轉的中間響應（從應用上也不會記錄，由於若是記錄，則回退按鈕則永遠不能回到start.php頁面，給用戶帶來不便）。

<?php   
//重定向瀏覽器   
header("Location: /replaceTest/second.php");   
//確保重定向後，後續代碼不會被執行   
exit;  
?>    

<html>
<head> 
        <style>

        </style>
</head> 
<body>
         <a href="./second.php">go to second html</a>
</body>
</html>