一、JS返回上一頁但不刷新
在平常的網頁中,當我們點擊瀏覽器的返回按鈕時,瀏覽器會自動返回到上一頁並且刷新頁面。但在某些情況下,我們可能希望在不刷新頁面的情況下返回上一頁,此時就可以使用以下代碼:
window.history.back();
使用這個代碼,可以實現返回上一頁,但是不會刷新當前頁面,相當於點擊瀏覽器返回按鈕的效果,比較常見的使用場景是在一些單頁面應用中,我們需要動態切換頁面。
二、返回上一步JS
除了可以使用瀏覽器的返回按鈕或者 history.back()
來返回上一頁之外,我們還可以通過以下代碼來實現返回上一步操作:
window.history.go(-1);
使用這個代碼,可以回到上一次的頁面操作,相當於點擊瀏覽器的後退按鈕,有時候我們需要回退到上一個頁面並且重新執行之前的操作,這時候就可以使用 window.history.go(-1)
。
三、JS返回上一頁失效
有時候我們會發現在使用 history.back()
時發現返回上一頁失效了,這是因為在一些情況下JS代碼會導致歷史紀錄被修改或者沒有歷史紀錄,我們需要避免這些情況的出現。
下面是可能導致JS返回上一頁失效的幾種情況:
- 頁面跳轉了多個頁面,瀏覽歷史已經被清空了。
- 頁面中使用了 pushState 或 replaceState 方法改變了瀏覽器的歷史記錄。
- 瀏覽器的隱身模式下,歷史紀錄不會被保存。
四、JS返回上一個頁面代碼
window.history.go(-1)
這個方法返回上一個頁面,但是有時候我們需要直接跳轉到上一個頁面而不需要回退,這時候可以使用下面的代碼:
window.location.href=document.referrer;
這個代碼會跳轉到當前頁面的上一個頁面,相當於點擊瀏覽器的後退按鈕。
五、JS返回上一頁頁面當時的頁面內容
有時候我們需要返回到上一頁時,還需要保留上一頁的頁面內容,這時候可以使用以下方法:
window.location.replace(document.referrer);
在使用這段代碼後,會重定向到上一頁,但是不會重新載入頁面,相當於在當前頁面中直接顯示上一頁的內容。
六、JS返回上一頁並刷新上一頁面
在有些場景下,我們需要返回上一頁並且刷新上一頁面,可以使用下面的代碼:
location.assign(document.referrer);
這個代碼會跳轉到當前頁面的上一個頁面並重新載入上一頁的頁面內容。
七、JS返回上一個頁面
除了使用 window.history.go(-1)
之外,我們也可以使用以下代碼來返回上一個頁面:
window.history.back();
這個方法會返回上一個頁面,並且在瀏覽器歷史中記錄這個操作。
八、JS返回上一個頁面並刷新
如果我們需要返回上一個頁面並且刷新這個頁面,可以使用下面的代碼實現:
window.location.reload(true); window.history.go(-1);
這個代碼會重新載入當前頁面,然後返回上一個頁面並刷新這個頁面。
結尾
以上是JS返回上一頁的各種實現方法,根據實際需求選擇適合自己的方法即可。在實際應用時,還需要注意以上幾種方法可能存在的一些問題,避免出現不必要的麻煩。
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/192146.html