設置hash后導致的返回問題的解決方案


      引: 通常,在寫移動端頁面的時候,如果遇上很多需要切換的tab,比如切換城市/類目等,都會發起一次異步的請求,請求數據加載出來后,當點擊某個具體的產品后,頁面將會跳轉到一個新的地方,我們希望用戶在瀏覽完這個產品之后,可以返回到原來的地方,而返回的地方是上一次用戶選擇的條件的頁面---這時候,hash就排上用場了。

設置hash:

  設置hash的方法很簡單。通過window.location.hash可以獲取到url上的hash值,也可以通過賦值動態地給hash賦值,代碼可以如下

var hash  = window.location.hash.slice(1);

  由於通過window.location.hash獲取到的hash是"#xxx"的格式,所以要獲取hash的具體值可以通過字符截取,通過slice可以實現。

  ps:hash值的設置有以下幾種集中方式,如果hash是number型,可以不需要帶#,如果設置字符串,也可以不加#,但是如果加上#就一定要按照字符串來設置。如以下幾種都是正確的設置hash的方式

window.location.hash = 1111;  //number型
window.location.hash = "1111"; //string型,不加#
window.location.hash = "#1111" ;//string型,加#

存在的問題:

  當你在一個頁面中無刷新的情況下,通過腳本(js)頻繁地設置了hash值,你會發現,返回的時候,返回到你設置的上一次hash的地址,但是頁面並沒有刷新,這時候,你會發現這並不是你想要的(這種惡心的結果在你設置了很多次hash的情況下尤為惡心),你可能想回到的是從某個地方跳轉過來的地方。這時候,可以通過document.location.replace強行把hash歷史去掉,實現想要的功能。

  

getFilterUrl: function(hash) {
        return document.location.protocol + '//' + document.location.host + document.location.pathname + document.location.search + '#' + hash;
}

  然后,使用的時候可以這樣:

var hash = "xxxx"; //這個hash自己通過具體的需求設置
document.location.replace(this.getFilterUrl(hash));
  

  如此這般,就可以解決頁面返回的業務需求。

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM