ajax前進後退問題

2021-08-25 16:12:07 字數 1151 閱讀 7684

隨著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...