JavaScript 偵測 Request 來自瀏覽器的 Go Back (回到上一頁)

這是自己寫的 bug 所衍生出來的需求，大意是如果 user 在某個頁面執行 submit 動作後會 redirect 到新頁面，但如果 user 此時按下 go back 再重新 submit 一次頁面就會出現錯誤，所以打算透過 JavaScript 來偵測 request 來源，如果是使用 go back 時就做一些動作(e.x. 重新整理頁面或是提示)

JavaScript 程式碼

<script>
    $(function () {
        if (!!window.performance && window.performance.navigation.type === 2) {
            //!! 用來檢查 window.performance 是否存在
            //window.performance.navigation.type ===2 表示使用 back or forward
            console.log('Reloading');
            //window.location.reload();//或是其他動作
        }
    })
</script>

其他可用 Type

TYPE_NAVIGATE (0)
透過 連結、書籤、表單操作、script、直接輸入 url 開啟 存取
TYPE_RELOAD (1)
透過 重新整理 或是 Location.reload() 方法存取
TYPE_BACK_FORWARD (2)
透過 瀏覽紀錄 存取
TYPE_RESERVED (255)
任何其他方式

實際效果

測試程式碼

<script>
$(function () {
    if (!!window.performance && window.performance.navigation.type === 0) {
        console.log('Navigate');
        //window.location.reload();
    }
    if (!!window.performance && window.performance.navigation.type === 1) {
        console.log('Reloading');
        //window.location.reload();
    }
    if (!!window.performance && window.performance.navigation.type === 2) {
        console.log('backforward');
        //window.location.reload();
    }
    
})
</script>