建站
咨詢
售后
建站咨詢
新聞中心
這篇文章將為大家詳細(xì)講解有關(guān)html5、jquery如何實現(xiàn)在回到歷史頁面時完全保留之前離開這個頁面時的狀態(tài)，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，先為連城等服務(wù)建站，連城等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為連城企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
比如在頁面A中點開了一個折疊列表（用jquery做的），并且向下拖動了一點滾動條，然后通過列表中的某個按鈕跳轉(zhuǎn)到了頁面B，B頁面中有一個goback按鈕，點擊一下就能跳回頁面A，跳回頁面A時，滾動條保持在之前離開時的狀態(tài)，并且之前打開的那個折疊列表也要是保持打開的。有哪些html5 API或jquery API可以實現(xiàn)嗎？
ps：我試了jquery 中的history.back()，可以實現(xiàn)滾動條位置不變，但是折疊列表變成了初始狀態(tài)（也就是說和刷新了頁面一樣），具體如下：
頁面分為兩個，一個是列表頁：
一個是內(nèi)容頁：
先說列表頁：
你可以觀察到我在列表頁展開時是帶有錨的，當(dāng)列表頁加載時，若 JS 檢測到 URL 上有錨，展開對應(yīng)的折疊列表；若 URL 上沒有錨的時候，就展開第一個，并且滾動條不滾動。
當(dāng)點擊折疊列表的 panel-heading 時，使用 history.pushState(null, null, url) ，改變 URL 上的錨，并展開該折疊列表以及滾動到該折疊列表的頂部。
然后說一下內(nèi)容頁里的「返回」：
首先需要判斷一下入口鏈接是什么，使用 document.referrer 即可。
然后可能出現(xiàn)以下兩種情況：
1、用戶是從你的折疊列表進入該內(nèi)容頁的，那么你可以使用 history.back()，這時之前使用 history.pushState() 改變的錨還保留，而且會自動展開并滾動到這個錨所對應(yīng)的折疊列表。
2、用戶是直接在地址欄輸入鏈接進入的，此時你可以直接用 location.href = url 將它跳轉(zhuǎn)到它的上一級鏈接中。
具體的效果你可以來我們網(wǎng)站看：計蒜客 - 讓學(xué)習(xí)更有味，要進入內(nèi)容頁需要登錄才行~
你這種需求比較適合使用 URL 來保存狀態(tài)，然后使用 URL 來進行事件驅(qū)動。這樣的好處在于將各個頁面的狀態(tài)保存在各自的 URL 里，不管是使用瀏覽器的前進后退還是將當(dāng)前鏈接分享給他人，都不會丟失頁面狀態(tài)。
驅(qū)動過程分為以下幾步：
修改 URL (trigger) -> 解析 URL -> 調(diào)用對應(yīng)的回調(diào) (listener)
其中：
為了不引發(fā)界面刷新，修改 URL 時需要使用 URL hash 或者 history.pushState()。
注冊 listener、解析 URL 和調(diào)用 listener 可以交給前端路由。（自己年輕的時候也造過一個前端路由的輪子 PRouter.js。（逃
當(dāng)然如果不希望把一些狀態(tài)保存在 URL 里，那也可以保存在 localStorage 里。但不變的是一定要用狀態(tài)來驅(qū)動頁面行為，而不是先執(zhí)行頁面行為然后再去保存狀態(tài)。
簡單的狀態(tài)可以放在hash里
再復(fù)雜點的可以放在localstorage或者sessionstorage里
要是再復(fù)雜的話，建議還是層疊多個視圖吧，這樣無論多復(fù)雜的狀態(tài)都會保存
題主如果用 傳統(tǒng)的整頁刷新模式，那必然需要 hash 標(biāo)記 + jQuery 插件響應(yīng)的“打配合”方案。但這實在沒必要，子欄目頁面之間切換而產(chǎn)生的反復(fù)加載、解析、執(zhí)行、渲染，會非常浪費性能……
所以，以“局部刷新”著名的 AJAX 模式，自然是實現(xiàn)“局部駐留”的極佳方案（IE 6 中的 Outlook Web 版是最早的實現(xiàn)）～
而且，jQuery 的 load() 實例方法已經(jīng)把 AJAX Get 請求、jQuery empty()、jQuery html() 封裝起來，分分鐘實現(xiàn) 局部刷新～
以上是 用戶瀏覽過程的“前進階段”，而“后退階段”就需要先在前進時留下歷史記錄，再在用戶后退（瀏覽器后退功能 或 用戶觸發(fā)了前端工程師寫的包含 history.back() 調(diào)用的代碼）時恢復(fù)之前局部刷新過的 正文子頁面，并把頁面主框架中的 全局導(dǎo)航菜單 指向?qū)?yīng)的條目。這種為 AJAX 記錄歷史信息的技術(shù)就是 HTML 5 History API（history.pushState() 是其最常用的 方法），IE 8/9 可以用 window.onhashchange 兼容，IE 6/7 就只能用 settimeout() 模擬 hashchange 事件 或用 iframe 的 window.history 來記錄 window.parent 的 AJAX 歷史～
上述兼容在 Github 上已有成熟的開源庫，也有結(jié)合 AJAX、pushState 的成熟框架 —— PJAX～
（習(xí)慣 jQuery 風(fēng)格 API 的人，推薦一下本人開發(fā)的 PJAX 模式框架 —— EasyWebApp，托管于 Git@OSC —— http://git.oschina.net/Tech_Query/EasyWebApp ）
網(wǎng)頁的結(jié)構(gòu)天然是不應(yīng)當(dāng)返回的，只有前進。
返回這塊被瀏覽器拿去了。
自定義一個鏈接，跳轉(zhuǎn)到另外的頁面上。那就給目標(biāo)頁面增加Hash之類的狀態(tài)識別。
三個方法 1,hash 2,localstroge 3,cookie
之前用localstorage做過，把要保存的狀態(tài)push到一個對象里，加載頁面的時候判斷對象，不過localstorage不能不能設(shè)定壽命，也就是說你無法在用戶離開你的頁面時清除，所以建議你試試sessionstorage， 跟session的用法一樣，會在用戶離開時清除。
關(guān)于“html5、jquery如何實現(xiàn)在回到歷史頁面時完全保留之前離開這個頁面時的狀態(tài)”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
分享題目：html5、jquery如何實現(xiàn)在回到歷史頁面時完全保留之前離開這個頁面時的狀態(tài)
本文路徑：http://ef60e0e.cn/article/ghsoih.html
