微信瀏覽器點擊系統返回,安卓返回會重載頁面回到頁面頂部,iOS則返回則會保留以前瀏覽位置的解決方法


後續補充: 頁面css設置了height: 100%,來避免使用fixed定位彈窗引發的部分機型兼容問題,所以會在返回的時候回到頁面頂部,補充解決辦法: 在彈窗出現的時候在設置100%高度,並讓文檔滾動到以前滾動的位置,彈窗關閉的時候取消高度限制,body滾動還原css


在近期作的一個移動端分享到微信的頁面時,遇到了這樣一個現象:html

在A頁面中部點擊連接跳轉到B頁面後,按系統返回操做回到A頁面時,
在安卓中刷新重載顯示頁面的頂部開始,
iOS中則直接返回上次瀏覽位置,保存了用戶操做記錄;

針對上述問題,在網上查找了相關解決辦法,說的都比較歸納,用了一天的時間才解決掉這個問題(蠢哭(╥╯^╰╥)),下面將個人方法貼出來,但願能給到像我以前同樣走彎路的童鞋一些幫助吧,主要適用於單頁面間的跳轉。用到了sessionStorage 和 history的replaceState方法。具體代碼以下:
html部分:segmentfault

<a data-h5="1" href="https://segmentfault.com/"><span class="img"><img src="./images/vip/img-book2.png" alt="全球好書"></span<b>如何高效學習</b></a>

js部分:瀏覽器

$('a[data-h5="1"]').on('click', function () {
    // 點擊連接記錄當前頁面滾動位置
    sessionStorage.setItem('scrollTop', $('.body').scrollTop());
});

// 判斷當前頁面是否返回仍是直接跳轉的,讀取sessionStorage緩存顯示頁面
if (sessionStorage.getItem('scrollTop') != null && sessionStorage.getItem('loadType') == 'back') {
    // 避免載入延時處理
    setTimeout(function(){
        // 執行緩存信息
        $('.body').scrollTop(sessionStorage.getItem('scrollTop'));
        // 清除上次緩存
        sessionStorage.removeItem('scrollTop');
    },200);

}
// 設置緩存頁面加載來源信息,load:直接跳轉,back:瀏覽器返回
sessionStorage.setItem('loadType', 'load');
// 設置瀏覽器history,用來監測頁面返回
replaceHistory(window.location.href);

// 監測瀏覽器返回事件,設置返回頁面緩存狀態
window.addEventListener("popstate", function (e) {
    // 設置sessionStorage中頁面返回參數標記
    sessionStorage.setItem('loadType', 'back');
}, false);

function replaceHistory(url) {
    var state = {
        title: "title",
        url: url
    };
    window.history.replaceState(state, "title", url);
}

至此,微信瀏覽器按返回不能保存以前界面的瀏覽位置信息的問題就解決了,若是有更好的解決辦法,歡迎你們一塊兒交流討論哈~~
一個小問題花費那麼多的時間來解決真的很頭疼,自身能力真的還差太多。。。修煉中。。。。緩存

相關文章
相關標籤/搜索