隨著ajax的「大**」,跟web帶來了活力,但也帶來了一下新的問題,比如下面將要討論的「瀏覽器前進後退」的問題,由於區域性重新整理,url不變,瀏覽器感知不到「變化」,無法使用前進後退按鈕。
解決問題之前
瀏覽器是如何記錄訪問歷史並實現前進與後退的?
通常我們看到的瀏覽器位址列url的變化會被瀏覽器記錄下來,還有頁面中iframe子頁面的位址變化也也會被瀏覽器記錄,
瀏覽器將訪問記錄儲存起來,以便進行前進和後退。
例如在後跟上不同的引數(或者不同的錨點),瀏覽器將會一一記錄下來。
開始解決問題
知道了瀏覽器是如何記錄訪問歷史的(url的變化),那就可以解決ajax帶來的不能前進後退的問題了,思路有二:
1.通過隱藏的iframe記錄瀏覽歷史來實現
實現思路:
在主頁面中嵌入iframe,在每次觸發ajax的請求的時候,將ajax請求的位址傳遞給iframe的子頁面,此時瀏覽器將會
記錄下iframe子頁面位址的變化,當觸發瀏覽器的前進後退按鈕時,iframe的子頁面位址會變化,此時iframe的子頁
麵中的js將會呼叫主頁面中的相應js方法來呼叫對應的ajax請求。
2.通過url中錨點或者引數的變化來實現
gmail、twitter和pip.io均使用這種方式來解決ajax前進後退的問題
有一定經驗的開發者都有過對於ajax前進後退歷史控制的經歷,也湧現了不少的框架,不過發現這些框架對於設定了document.domain的會抱拒絕訪問,其原因是因為動態建立的iframe沒有設定document.domain,所以不靈了。
但這不是我要說的,我要說的是,當使用者直接修改位址列的hash並敲擊回車後,這時候你就會發現歷史控制失靈了。
大家要弄清楚,對於頁面中有iframe的情況,iframe位址的變化(注意,通過window.location.href = hash;)會被瀏覽器記錄在案,如果每次都是變化的iframe的位址,那前進後退都會改變iframe的位址,而不影響主頁面。所以對於手動改動了位址列的hash,改動的是主頁面的hash,但不是href,所以需要同步到iframe中的href去,這樣才可以在維繫歷史控制。
具體**就不詳細列出了,大家注意到這點就行了。
Unity EZGUI 過渡前進與後退
unity3d教程 unity ezgui 過渡前進與後退 之前使用ezgui真的很偷懶,都不弄懂panel transition裡forward與back的真正差異,今天終於下定決心搞定它。說穿了就是panel裡index的 向上增加 或 向下遞減 而已。來看個例子,假設有三個panel分別是me...
Vue路由判斷前進後退
判斷方式應該有很多,但是我感覺最簡單的方式,也是我專案中採用的方式 定義全域性跳轉和返回函式,直接 接管 vue路由的前進和後退事件 註冊全域性方法 vue.prototype.push url string,closetransition boolean false vue.prototype.p...
後退,重新整理,前進js按鈕
上面的重新整理只是本頁面重新整理,如果頁面時幾個frame拼成的 現在假設top.htm 即上面的頁面 有七個button來實現對bottom.htm 即下面的頁面 的重新整理,可以用以下七種語句,哪個好用自己看著辦了。語句1.window.parent.frames 1 location.relo...