成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

微信瀏覽器點(diǎn)擊系統(tǒng)返回,安卓返回會(huì)重載頁(yè)面回到頁(yè)面頂部,iOS則返回則會(huì)保留之前瀏覽位置的解決方法

smallStone / 2950人閱讀

后續(xù)補(bǔ)充: 頁(yè)面css設(shè)置了height: 100%,來(lái)避免使用fixed定位彈窗引起的部分機(jī)型兼容問(wèn)題,因此會(huì)在返回的時(shí)候回到頁(yè)面頂部,補(bǔ)充解決辦法: 在彈窗出現(xiàn)的時(shí)候在設(shè)置100%高度,并讓文檔滾動(dòng)到之前滾動(dòng)的位置,彈窗關(guān)閉的時(shí)候取消高度限制,body滾動(dòng)還原

在近期做的一個(gè)移動(dòng)端分享到微信的頁(yè)面時(shí),遇到了這樣一個(gè)現(xiàn)象:

在A頁(yè)面中部點(diǎn)擊鏈接跳轉(zhuǎn)到B頁(yè)面后,按系統(tǒng)返回操作回到A頁(yè)面時(shí), 
在安卓中刷新重載顯示頁(yè)面的頂部開始,
iOS中則直接返回上次瀏覽位置,保存了用戶操作記錄;

針對(duì)上述問(wèn)題,在網(wǎng)上查找了相關(guān)解決辦法,說(shuō)的都比較概括,用了一天的時(shí)間才解決掉這個(gè)問(wèn)題(蠢哭(╥╯^╰╥)),下面將我的方法貼出來(lái),希望能給到像我之前一樣走彎路的童鞋一些幫助吧,主要適用于單頁(yè)面間的跳轉(zhuǎn)。用到了sessionStorage 和 history的replaceState方法。具體代碼如下:
html部分:

全球好書如何高效學(xué)習(xí)

js部分:

$("a[data-h5="1"]").on("click", function () {
    // 點(diǎn)擊鏈接記錄當(dāng)前頁(yè)面滾動(dòng)位置
    sessionStorage.setItem("scrollTop", $(".body").scrollTop());
});

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

}
// 設(shè)置緩存頁(yè)面加載來(lái)源信息,load:直接跳轉(zhuǎn),back:瀏覽器返回
sessionStorage.setItem("loadType", "load");
// 設(shè)置瀏覽器history,用來(lái)監(jiān)測(cè)頁(yè)面返回
replaceHistory(window.location.href);

// 監(jiān)測(cè)瀏覽器返回事件,設(shè)置返回頁(yè)面緩存狀態(tài)
window.addEventListener("popstate", function (e) {
    // 設(shè)置sessionStorage中頁(yè)面返回參數(shù)標(biāo)記
    sessionStorage.setItem("loadType", "back");
}, false);

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



至此,微信瀏覽器按返回不能保存之前界面的瀏覽位置信息的問(wèn)題就解決了,如果有更好的解決辦法,歡迎大家一起交流討論哈~~
一個(gè)小問(wèn)題花費(fèi)那么多的時(shí)間來(lái)解決真的很頭疼,自身能力真的還差太多。。。修煉中。。。。

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/95819.html

相關(guān)文章

  • 微信里面防止下拉"露底"組件

    摘要:從本人這兩個(gè)月移動(dòng)實(shí)踐的經(jīng)驗(yàn)來(lái)看,微信的里面和的滑動(dòng)效果無(wú)論是在安卓還是下的體驗(yàn)都很一般,有明顯的卡頓現(xiàn)象,在安卓下面還會(huì)出現(xiàn)滑動(dòng)過(guò)快的時(shí)候在頁(yè)面停下來(lái)之后滾動(dòng)條才閃到相應(yīng)位置的現(xiàn)象。 前言 在微信里面瀏覽頁(yè)面的時(shí)候,有一個(gè)很管用的方法可以區(qū)分這個(gè)頁(yè)面是原生的還是H5形式的。隨便打開一個(gè)頁(yè)面,用力往下扯的時(shí)候,如果頁(yè)面上方出現(xiàn)了黑底,黑底上有一行諸如網(wǎng)頁(yè)由game.weixin.qq....

    hot_pot_Leo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<