溫馨提示×

溫馨提示×

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

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

關(guān)于瀏覽器回退默認(rèn)行為的研究 回退保存頁面狀態(tài)

發(fā)布時間:2020-07-02 11:27:37 來源:網(wǎng)絡(luò) 閱讀:2123 作者:MachealChen 欄目:web開發(fā)

緣起:最近在研究 移動端的頁面研發(fā)工作,由于之前從來沒有專業(yè)開發(fā)過移動端頁面,所以在開發(fā)過程中,可以說是處處有精彩,處處有收獲.最讓我意外的是,瀏覽器頁面回退問題 就是個頭疼的問題.

需求:我們的需求是,在a頁面,打開b頁面,之后b再回退到a頁面,a頁面仍然能保持 a剛剛打開b頁面時的狀態(tài).

分析過程:最開始接到這個需求,覺得這也不是啥大需求啊,瀏覽器默認(rèn)行為,就能支持吧,經(jīng)過測試后,發(fā)現(xiàn)有的瀏覽器支持,有的不支持。有的頁面支持,有的頁面不支持,可以說,比較懵,最后決定,先分析一些基本的瀏覽器知識,之后再思考.

分析結(jié)果:
經(jīng)過了長時間的分析后,對瀏覽器行為有了一個較深的了解,經(jīng)驗(yàn)如下:

一.瀏覽器會記住頁面滾動條位置的行為:
1.a頁面為靜態(tài)資源頁面,當(dāng)a打開b頁面時,頁面會記錄滾動條位置.
2.a頁面使用ajax請求數(shù)據(jù),切ajax是同步請求,且頁面其他ajax請求都遵循此規(guī)則時生效.
只要記住這兩個規(guī)則,在開發(fā)時就會有一個清晰的思路.

二.解決方案總結(jié):
1.可以使用單頁應(yīng)用的模式,進(jìn)行開發(fā),原理是 hash 路由. #
2.可以借用localstorage緩存,在a頁面打開b時,記錄頁面元素位置,及頁面元素,之后在回退時,直接從緩存中讀數(shù)據(jù).
3.可以借助 瀏覽器記住頁面狀態(tài)行為來解決.直接輸出靜態(tài)頁面,優(yōu)點(diǎn)時,無需控制行為,無需寫多余的業(yè)務(wù),去控制頁面的行為.

我采用的方式是,頁面借助 c# mvc razor技術(shù),靜態(tài)輸出,之后用點(diǎn)擊下一頁,因?yàn)閍jax不太好控制,翻頁.分析了許多大廠的頁面,也沒太研究透,只是看他們都是靜態(tài)頁面輸出。如果大家有更好的方式,可以評論哦,共同進(jìn)步,互相學(xué)習(xí).

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI