瀏覽器改變url
1 改變瀏覽器訪問地址的方式
1-1 不重繪頁面內容，改變瀏覽器訪問地址url
1-1-1 query param
location.search = '?page=2';
1-1-2 hash
window.location.hash = 'www.zhihu.com'
如果 原地址 是 http://127.0.0.1/noliebe/template.html
運行 window.location.hash = 'www.zhihu.com' 后
url地址將變為 http://127.0.0.1/noliebe/template.html#www.zhihu.com
1-1-3 replaceState
window.history.replaceState(undefined, '', nU)
// 引數 nU 應該是歷史記錄物體的 URL. 新的 URL 跟當前的 URL 必須是同源; 否則 replaceState 拋出一個例外，
如果 原地址 是 http://127.0.0.1/noliebe/template.html
運行 window.history.replaceState(undefined, '', '/box') 后
url地址將變為 http://127.0.0.1/box
且不會從新地址重新加載頁面，也不會留下訪問記錄
再舉一個栗子
用戶在 http://www/aaa 下點擊了登錄，跳轉到了 http://www/login
login頁面運行了 window.history.replaceState(undefined, '', '/box')
此時url地址是 http://www/box，但頁面內容是 http://www/login 的內容
用戶如果點擊瀏覽器的回傳按鈕，url 地址將會是 http://www/aaa, 頁面內容還是 http://www/login 的內容
只有主域 www 變了的時候，瀏覽器才會重新從超鏈接加載頁面資料
參考 https://developer.mozilla.org/zh-CN/docs/Web/API/History/replaceState
1-1-3 pushState
window.history.pushState(undefined, '', nU)
pushState 大致同 replaceState, 但是會留下訪問記錄，
改一下之前的栗子
用戶在 http://www/aaa 下點擊了登錄，跳轉到了 http://www/login
login頁面運行了 window.history.pushState(undefined, '', '/box')
此時url地址是 http://www/box，但頁面內容是 http://www/login 的內容
用戶如果點擊瀏覽器的回傳按鈕，url 地址將會是 http://www/login, 頁面內容還是 http://www/login 的內容
只有主域 www 變了的時候，瀏覽器才會重新從超鏈接加載頁面資料
參考 https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/499104.html
標籤：其他
上一篇：JavaScript詳解