亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

html5、jquery如何實現在回到歷史頁面時完全保留之前離開這個頁面時的狀態

發布時間:2021-02-19 09:15:23 來源:億速云 閱讀:248 作者:小新 欄目:web開發

這篇文章將為大家詳細講解有關html5、jquery如何實現在回到歷史頁面時完全保留之前離開這個頁面時的狀態,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。

比如在頁面A中點開了一個折疊列表(用jquery做的),并且向下拖動了一點滾動條,然后通過列表中的某個按鈕跳轉到了頁面B,B頁面中有一個goback按鈕,點擊一下就能跳回頁面A,跳回頁面A時,滾動條保持在之前離開時的狀態,并且之前打開的那個折疊列表也要是保持打開的。有哪些html5 API或jquery API可以實現嗎?
ps:我試了jquery 中的history.back(),可以實現滾動條位置不變,但是折疊列表變成了初始狀態(也就是說和刷新了頁面一樣),具體如下:


頁面分為兩個,一個是列表頁
html5、jquery如何實現在回到歷史頁面時完全保留之前離開這個頁面時的狀態一個是內容頁
html5、jquery如何實現在回到歷史頁面時完全保留之前離開這個頁面時的狀態
先說列表頁:

你可以觀察到我在列表頁展開時是帶有錨的,當列表頁加載時,若 JS 檢測到 URL 上有錨,展開對應的折疊列表;若 URL 上沒有錨的時候,就展開第一個,并且滾動條不滾動。

當點擊折疊列表的 panel-heading 時,使用 history.pushState(null, null, url) ,改變 URL 上的錨,并展開該折疊列表以及滾動到該折疊列表的頂部。
然后說一下內容頁里的「返回」:
首先需要判斷一下入口鏈接是什么,使用 document.referrer 即可。
然后可能出現以下兩種情況:
1、用戶是從你的折疊列表進入該內容頁的,那么你可以使用 history.back(),這時之前使用 history.pushState() 改變的錨還保留,而且會自動展開并滾動到這個錨所對應的折疊列表。
2、用戶是直接在地址欄輸入鏈接進入的,此時你可以直接用 location.href = url 將它跳轉到它的上一級鏈接中。
具體的效果你可以來我們網站看:計蒜客 - 讓學習更有味,要進入內容頁需要登錄才行~ 你這種需求比較適合使用 URL 來保存狀態,然后使用 URL 來進行事件驅動。這樣的好處在于將各個頁面的狀態保存在各自的 URL 里,不管是使用瀏覽器的前進后退還是將當前鏈接分享給他人,都不會丟失頁面狀態。
驅動過程分為以下幾步:
修改 URL (trigger) -> 解析 URL -> 調用對應的回調 (listener)
其中:

  • 為了不引發界面刷新,修改 URL 時需要使用 URL hash 或者 history.pushState()。

  • 注冊 listener、解析 URL 和調用 listener 可以交給前端路由。(自己年輕的時候也造過一個前端路由的輪子 PRouter.js。(逃

當然如果不希望把一些狀態保存在 URL 里,那也可以保存在 localStorage 里。但不變的是一定要用狀態來驅動頁面行為,而不是先執行頁面行為然后再去保存狀態。 簡單的狀態可以放在hash里
再復雜點的可以放在localstorage或者sessionstorage里
要是再復雜的話,建議還是層疊多個視圖吧,這樣無論多復雜的狀態都會保存 題主如果用 傳統的整頁刷新模式,那必然需要 hash 標記 + jQuery 插件響應的“打配合”方案。但這實在沒必要,子欄目頁面之間切換而產生的反復加載、解析、執行、渲染,會非常浪費性能……
所以,以“局部刷新”著名的 AJAX 模式,自然是實現“局部駐留”的極佳方案(IE 6 中的 Outlook Web 版是最早的實現)~
而且,jQuery 的 load() 實例方法已經把 AJAX Get 請求、jQuery empty()、jQuery html() 封裝起來,分分鐘實現 局部刷新~
以上是 用戶瀏覽過程的“前進階段”,而“后退階段”就需要先在前進時留下歷史記錄,再在用戶后退(瀏覽器后退功能 或 用戶觸發了前端工程師寫的包含 history.back() 調用的代碼)時恢復之前局部刷新過的 正文子頁面,并把頁面主框架中的 全局導航菜單 指向對應的條目。這種為 AJAX 記錄歷史信息的技術就是 HTML 5 History API(history.pushState() 是其最常用的 方法),IE 8/9 可以用 window.onhashchange 兼容,IE 6/7 就只能用 settimeout() 模擬 hashchange 事件 或用 iframe 的 window.history 來記錄 window.parent 的 AJAX 歷史~
上述兼容在 Github 上已有成熟的開源庫,也有結合 AJAX、pushState 的成熟框架 —— PJAX~
(習慣 jQuery 風格 API 的人,推薦一下本人開發的 PJAX 模式框架 —— EasyWebApp,托管于 Git@OSC ——  git.oschina.net/Tech_Qu ) 網頁的結構天然是不應當返回的,只有前進。
返回這塊被瀏覽器拿去了。
自定義一個鏈接,跳轉到另外的頁面上。那就給目標頁面增加Hash之類的狀態識別。 三個方法 1,hash 2,localstroge 3,cookie 之前用localstorage做過,把要保存的狀態push到一個對象里,加載頁面的時候判斷對象,不過localstorage不能不能設定壽命,也就是說你無法在用戶離開你的頁面時清除,所以建議你試試sessionstorage, 跟session的用法一樣,會在用戶離開時清除。

關于“html5、jquery如何實現在回到歷史頁面時完全保留之前離開這個頁面時的狀態”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

集贤县| 临漳县| 四子王旗| 阜新| 崇文区| 永平县| 淳安县| 曲阜市| 横峰县| 孟连| 大足县| 奉化市| 和静县| 博爱县| 潞城市| 忻州市| 常宁市| 双流县| 凉山| 新巴尔虎右旗| 五台县| 开鲁县| 哈尔滨市| 竹山县| 宾阳县| 永川市| 正宁县| 剑川县| 黑水县| 宜州市| 尤溪县| 永吉县| 清徐县| 鹤山市| 鞍山市| 亚东县| 崇义县| 邯郸市| 富民县| 阿荣旗| 赣州市|