webview中側滑返回上一頁引發的思考,history學習


昨天被測試人員提出了一個bug。套殼的h5項目,程序中的返回是正常的能正確返回頁面。但是當測試人員使用了手機的側滑功能后就發現返回的頁面有問題了。當時第一感覺就是側滑都不是我程序能控制的管我鳥事。但是奈何這個項目前端只有我一個人負責,不搞也要搞。然后測試人員又提供了一個號消息,另一個項目側滑沒有問題,是正常的。於是開始找尋兩個項目中返回邏輯的差別。最后發現差別是有問題的A項目,返回的時候有些進行了特定的跳轉。而沒問題的B項目返回全部都是windows.history.back()。然后就開始查詢資料看看問題點在哪兒。因為項目使用的umi,於是去github查看umi使用的什么庫管理history。最后查找到這篇文章https://www.cnblogs.com/accordion/p/5699372.html。

經查閱一些其他資料稍微整理一下history的一些基礎知識:history的方法包括:back()、forward()、go(num)、pushState(stateData, title, url)、replaceState(stateData, title, url),屬性:length、state, 事件:window.onpopstate。history的一些方法說明:

(1)back():回退到上一個訪問記錄; 在歷史記錄中后退:window.history.back();

(2)forward():前進到下一個訪問記錄; 在歷史記錄中前進:window.history.forward();

(3)go(num):跳轉到相應的訪問記錄;其中num大於0,則前進;小於0,則后退; 例如:后退一頁window.history.go(-1); 向前移動一頁window.history.go(1);

(4)查看歷史記錄棧中一共有多少個記錄點:

(5)pushState(stateData, title, url):在history中創建一個新的訪問記錄,不能跨域,且不造成頁面刷新;window.history.length;

(6)replaceState(stateData, title, url):修改當前的訪問記錄,不能跨域,且不造成頁面刷新;

(7)window.onpopstate:當調用history.go()、history.back()、history.forward()時觸發;pushState()\replaceState()方法不觸發。

(8)window.onhashchange:當前 URL 的錨部分(以 '#' 號為開始) 發生改變時觸發。觸發的情況如下:a、通過設置Location 對象 的 location.hash 或 location.href 屬性修改錨部分;b、使用不同history操作方法到帶hash的頁面;c、點擊鏈接跳轉到錨點。

基礎的一些知識了解之后開始查找問題點在哪兒。umi中的history.push()使用的就是pushState方法。一開始想查找history棧中存儲的值。但是找了好多文章沒有找到對應的查找方法,唯一一篇相關的就是上面提到的那個文章。講解了堆棧的執行順序。

 

當在文章中看到這邊的時候,頓時就感覺找到問題點了。然后開啟項目測試了一下。通過打印history.length屬性來查看當時history堆棧中具體的存儲數量。才發現果然是這個問題。pushState方法創建一個新的url記錄,其也是清空、再新增記錄;,最終的解決方法是項目中全部都使用特定跳轉,不在使windows.history.back()。這樣就避免堆棧中出現無效的數據。雖然這樣增加了項目中返回邏輯的代碼量。有些頁面是帶參數跳轉的,如果使用windows.history.back()就不用理會上一個頁面傳過來的參數了。但是后面需要使用history.push() 指定跳轉的話,需要獲取上一頁的參數拼接后再跳轉。

加油 奧利給!!!

 


免責聲明!

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



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