iphone微信后退不刷新的问题

Posted 2020-10-13 顶级手法

　　查看了很多解决ios微信返回不刷新页面的文章，大部分都是利用H5的新特性history来进行解决的，而且很多人的想法都是用了pushstate和popstate来实现了这个功能，但是用pushstate之后会添加一个history实体，然后在监听到时间触发popstate的时候，刷新页面的时候其实刷新的是刚才添加的这个实体，这样会陷入无限循环中，用户将退不出这个页面或者直接关闭这个页面。下面的这种方法很好的解决了这个问题。

$(function() {
        pushHistory();
    });
    function pushHistory() {
        window.addEventListener("popstate", function(e) {
　　　　　//这里监听到了后退事件
            self.location.reload();
        }, false);
        var state = {
            title : "",
            url : "#"
        };
        window.history.replaceState(state, "", "#");
    };

Tips:

1.popState事件只有在作用go(-1),back(),forward()等操作时才会触发。 

2.重点是self.location.reload();,后退后刷新当前页面。其它人写的文章里缺少这一块，弄的我很是郁闷。 

3.微信里在监听到iphone后退事件后会触发popState事件，在PopState事件里执行：self.location.reload();即可刷新后退后的页面。

4.pustate增加了history的长度，在后退的时候会出错，往往跳不出循环，而replace很好的解决了这个问题。