解決微信返回上一頁之后，頁面不刷新

chengtao1633 發(fā)布于2019-08-23 16:45 / 2072人閱讀

摘要：微信公眾號點擊后退按鈕，優(yōu)選讀取緩存，所以里的生命周期不會在進行調(diào)用。原因分析一瀏覽器包括微信的開發(fā)者工具都是的返回可以刷新頁面但是唯有不行二瀏覽器原因返回上一頁后，頁面內(nèi)容并不會刷新。

問題描述: A頁面跳轉(zhuǎn)到B頁面,在B頁面進行了相關(guān)的操作之后,返回到A頁面,A頁面的數(shù)據(jù)沒有刷新.具體實例:
由于項目中使用了vue，使用了gulp和普通的頁面跳轉(zhuǎn)。并沒有引入vue-router。所以不能使用 watch監(jiān)控$router。
微信公眾號ios點擊后退按鈕，優(yōu)選讀取緩存，所以vue里的生命周期不會在進行調(diào)用。
所以項目中執(zhí)行隱藏分享qq，空間。等功能不被再次執(zhí)行。

原因分析:
一.android 瀏覽器包括微信的開發(fā)者工具都是ok的返回可以刷新頁面但是唯有iOS不行.
二.iOS 瀏覽器原因：history.go(-1)返回上一頁后，頁面內(nèi)容并不會刷新。在B頁面修改的內(nèi)容，返回到A時并沒有更新新的內(nèi)容，必須手動刷新。
在Debug模式下，發(fā)現(xiàn)在iOS瀏覽器中，返回上一頁后，頁面的 JS 代碼并未執(zhí)行。我們猜測可能是緩存引起的，于是使用 meta 禁止了緩存，但仍然沒有效果。于是進一步猜測可能是瀏覽器內(nèi)部機制導(dǎo)致——iOS為了提升瀏覽網(wǎng)頁的效率，可能給已瀏覽過的網(wǎng)頁添加一個類似快照的東西，當點擊返回按鈕后，直接調(diào)用快照展示給用戶，省去了執(zhí)行JS這一步驟(純靜態(tài)文件依然被緩存)。這本來是iOS的優(yōu)勢,在這卻變成了bug存在的風(fēng)險.
三.頁面數(shù)據(jù)是通過 ajax 請求后臺數(shù)據(jù)，通過鏈接跳到下一頁，然后返回，
最常用的返回上一頁的方法：history.go(-1)和 history.back(),
在 android 中正常顯示上一頁，但是在 iOS 中不能正常顯示，通過打印
返回的數(shù)據(jù)，發(fā)現(xiàn)數(shù)據(jù)是上一個頁面最后請求的數(shù)據(jù)。
解決方法:
在回退后需要刷新的頁面加以下js:

$(function () {
var isPageHide = false;
window.addEventListener("pageshow", function () {
if (isPageHide) {
window.location.reload();
}
});
window.addEventListener("pagehide", function () {
isPageHide = true;
});
})

將上邊的代碼寫在A頁面的js文件中
即可實現(xiàn)想要的效果.如下不需要手動刷新就可以實現(xiàn)

作者：上善_若水
鏈接：https://www.jianshu.com/p/b5c...
來源：簡書
簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處。

備注：我的項目代碼

window.localStorage.removeItem ("openIdItem");
window.localStorage.removeItem ("foodMatchtype");
window.localStorage.removeItem ("peicaned");
// window.localStorage.removeItem ("userInfoNeed");
window.localStorage.setItem("openIdItem",JSON.stringify(getUrlParam("openId")))
var openIdItem = window.localStorage.getItem("openIdItem")
window.localStorage.setItem("foodMatchtype",JSON.stringify("5"))
new Vue({
    el: "#containerBox",
    data: {
        imageUrl:"",
        planInfos:[],
        mealInfos:[],
        advantageInfos:[],
        proEndorsement:[],
        userInfoNeed:{},
        appScope:"",//人群范圍
        planName:"",//方案名稱
        isContentShow:false,//content內(nèi)容默認不顯示
        chanType: "fwh",
        url: location.href,
        openId:""
    },
    created(){
    },
    mounted:function(){
        this.wxConfig()

        this.$nextTick(function(){
            //顯示loading
            showLoading();
            this.getInitData();
            

        })
    },
    methods:{
        start:function(){
            window.location.href = "./views/condition.html"
        },
        getInitData(){
            /* 
                0 高血脂
                1 糖尿病
                2 肥胖
                3 痛風(fēng)
                4 高血壓
                5 成人
             */
            var param={"type":22}
        
            ajaxRequest("/v2/foods/matching/index.do", "POST",param,(data)=>{
                console.log(data,"initdata");
                if(data.retCode=="SUCCESS"){
                    //數(shù)據(jù)賦值
                    this.imageUrl = data.imageUrl;
                    this.planInfos = data.planInfos;
                    this.mealInfos = data.mealInfos;
                    this.advantageInfos = data.advantageInfos;
                    this.proEndorsement = data.proEndorsement;
                    this.planName = data.planName;
                    document.title = data.planName;
                    this.appScope = data.appScope[0];
                    // console.log(this.appScope,"data",data)
                    // 基礎(chǔ)信息配置
                    this.userInfoNeed = data.userInfoNeed;
                    window.localStorage.setItem("userInfoNeed",JSON.stringify(this.userInfoNeed))
                    window.localStorage.setItem("openIdItem",openIdItem)
                    window.localStorage.setItem("foodMatchtype",JSON.stringify("5"))
                    //隱藏loading
                    hideLoading();
                    this.isContentShow = true;

                }else{
                    this.isContentShow = false;
                    showTip(data.retInfo);
                }
      
            })
        },
        //微信配置
     wxConfig (){
            /**
             * 獲取微信公眾號配置 
             * @param {String} url
             * @param {String} chanType 渠道類型
             * */ 

            // var foodMatchtype =  5;
            // var openIdItem = getUrlParam("openIdItem");
            $.ajax({
                
                url: CONFIG.wx,
                data: JSON.stringify({"chanType":this.chanType,"url":decodeURIComponent(this.url)}),
                type: "post",
                contentType: "application/json",
                success:  (data) =>{
                    if (data.retCode == "SUCCESS") {
                        // window.localStorage.setItem("openIdItem",data.wxConfig.appId)
                        // this.openId=data.wxConfig.appId;
                        
                        wx.config({
                            debug: false,
                            appId: data.wxConfig.appId,
                            timestamp:data.wxConfig.timestamp,
                            nonceStr: data.wxConfig.nonceStr,
                            signature: data.wxConfig.signature,
                            jsApiList: ["checkJsApi","showMenuItems","hideAllNonBaseMenuItem","showMenuItems","hideMenuItems","chooseWXPay","onMenuShareTimeline","onMenuShareAppMessage","chooseImage","getNetworkType"]
                        });
                        //處理驗證失敗的信息
                        wx.error( (res) => {
                                console.log("驗證失敗返回的信息:",res);
                        });
                        wx.ready(function () {
                        
                            wx.hideMenuItems({
                                menuList: [ "menuItem:share:qq","menuItem:share:weiboApp","menuItem:share:facebook","menuItem:share:QZone","menuItem:editTag","menuItem:delete", "menuItem:copyUrl","menuItem:originPage", "menuItem:readMode","menuItem:openWithQQBrowser","menuItem:openWithSafari","menuItem:share:email","menuItem:share:brand"] // 要隱藏的菜單項，只能隱藏“傳播類”和“保護類”按鈕，所有menu項見附錄3
                            });
                            wx.showMenuItems({
                                    menuList: ["menuItem:share:appMessage","menuItem:share:timeline"]
                            })
                        
                            wx.onMenuShareTimeline({ 
                                title: "減約健康飲食推薦", // 分享標題
                                desc: "一周飲食搭配，上萬種單品選擇，都在這里", // 分享描述
                                link: CONFIG.wxUrl, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應(yīng)的公眾號JS安全域名一致
                                imgUrl: CONFIG.imgUrl ,
                                success: function () {
                                    // 設(shè)置成功
                                },
                                fail: function (err) {
                                }
                            })
                        // 測試：http://h5static.cs.jianzhishidai.cn/jkyy-foodmatchs/foodmatch/index.html?openIdItem=50310&foodMatchtype=2
                        // 生產(chǎn)：https://h5static.jianzhishidai.cn/foodmatch/index.html?openIdItem=50223332310&foodMatchtype=0
                            wx.onMenuShareAppMessage({
                                title: "減約健康飲食推薦", // 分享標題
                                desc: "一周飲食搭配，上萬種單品選擇，都在這里", // 分享描述
                                link: CONFIG.wxUrl, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應(yīng)的公眾號JS安全域名一致
                                imgUrl: CONFIG.imgUrl ,
                                success: function () {
                                    // 設(shè)置成功
                                },
                                fail: function (err) {
                                }
                                });
                        });
                        function GetMatchingStats(id,cb){
                        
                            var param={"type":"5","openId":getUrlParam("openId")};
                            ajaxRequest("/v2/food/matching/user/status/find.do", "POST", param, function (data) {
                                if(data.retCode=="SUCCESS"){
                                    if(data.foodMatch){
                                        var foodMatch = data.foodMatch;
                                        var foodMatchStatus = foodMatch.foodMatchStatus;//配餐狀態(tài)
                                        cb(foodMatchStatus)
                                    }
                                }else{
                                    showTip(data.retInfo);
                                }
                            })
                        }
                        if(!window.localStorage.getItem("peicaned")&&!getUrlParam("twojoin")){
                            GetMatchingStats("2",function(foodMatchStatus){
                                
                                if(foodMatchStatus == 1){
                                    
                                    localStorage.setItem("peicaned",true);
                                    console.log(!window.localStorage.getItem("peicaned"),!getUrlParam("twojoin"))
                                
                                    window.localStorage.setItem("openIdItem",openIdItem);
                                    window.localStorage.setItem("foodMatchtype",JSON.stringify("5"))
                                      // window.location.href="views/weekdiet.html";
                                        window.location.replace("views/weekdiet.html")
                                }else{
                                    
                                    $("body").css("display","block");
                                }
                            })
                        }else{
                            $("body").css("display","block");
                        }
                    } else {
                        showTip(data.tooltip);
                    }
                },
                fail: function (err) {
                }
            });        
        },
    },    
});

云服務(wù)器 GPU云服務(wù)器 js返回上一頁刷新 js返回上一頁 asp 返回上一頁返回上一頁js代碼

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103233.html

發(fā)表評論

登陸后可評論

0條評論

chengtao1633

男|高級講師

我要關(guān)注我要私信

TA的文章

stm32通過I2C接口實現(xiàn)溫濕度（AHT20）的采集

閱讀 3022·2021-11-23 09:51
[C語言—調(diào)試技巧]

閱讀 1016·2021-09-26 09:55
ftp主機地址填什么-ftp主機地址是什么？

閱讀 3972·2021-09-22 14:58
IMX6ULL裸機學(xué)習(xí)----LED正點原子在韋東山開發(fā)板上實現(xiàn)

閱讀 1503·2021-09-08 09:35
webdock，新增兩款丹麥高配VPS，€15/月：15核/7.5G內(nèi)存/75G SSD，€30/月

閱讀 1086·2021-08-26 14:16
設(shè)計模式 -- 觀察者模式

閱讀 891·2019-08-23 18:17
解決微信返回上一頁之后，頁面不刷新

閱讀 2073·2019-08-23 16:45
JavaScript進階之模擬new Object過程

閱讀 709·2019-08-23 15:55

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

解決微信返回上一頁之后，頁面不刷新

相關(guān)文章

Ios中微信頁面返回上一頁去除緩存幾種常見思路

解決微信內(nèi)置瀏覽器返回上一頁停留位置強制刷新問題的最簡單方法(適用于本頁無ajax請求)

監(jiān)聽微信返回事件踩坑指南

發(fā)表評論

0條評論

chengtao1633

男|高級講師

TA的文章

stm32通過I2C接口實現(xiàn)溫濕度（AHT20）的采集

[C語言—調(diào)試技巧]

ftp主機地址填什么-ftp主機地址是什么？

IMX6ULL裸機學(xué)習(xí)----LED正點原子在韋東山開發(fā)板上實現(xiàn)

webdock，新增兩款丹麥高配VPS，€15/月：15核/7.5G內(nèi)存/75G SSD，€30/月

設(shè)計模式 -- 觀察者模式