微信页面里iphone点返回不刷新问题

> 1.问题描述：

微信开发的时候，在公众号菜单中打开一个H5页面(如：分享的视频详情页面)，微信授权登录有跳转操作，点击左上角的返回按钮，(由于本页面第一次进来的时候没有加载完就发生了自身页面的跳转)，发现会出现卡死的情况。

解决方式1：微信页面里iphone点返回进行刷新操作

 

$(function() {
    pushHistory();
    window.addEventListener("popstate", function(e) {
        alert("后退");
        self.location.reload();
    }, false);
});
function pushHistory() {
    var state = {
        title : "",
        url : "#"
    };
    window.history.replaceState(state, "", "#");
};

解决方式2：微信页面里iphone点返回直接退出

 

if(browser.versions.ios){
    pushHistory();
    window.addEventListener("popstate", function(e) {
    	WeixinJSBridge.call('closeWindow');
    }, false);
}
function pushHistory() {
    var state = {
        title: "",
        url: window.location.href
    };
    window.history.pushState(state, state.title, state.url);
}

 

> 2.HTML5 history新特性pushState、replaceState区别:

--------------------------------------------------------------------------------

参数：

state：与要跳转到的URL对应的状态信息。

title：可以不传

url：要跳转到的URL地址，不能跨域。

--------------------------------------------------------------------------------

history.pushState(state, title, url)

将当前URL和history.state加入到history中，并用新的state和URL替换当前。不会造成页面刷新。

--------------------------------------------------------------------------------

history.replaceState(state, title, url)

用新的state和URL替换当前。不会造成页面刷新。

--------------------------------------------------------------------------------

两者看似没有区别，其实区别很大的，pushState是添加历史记录的，而replaceState是不添加的。

在ios系统上使用这两个操作历史记录，会有很多问题要处理，因为ios本身在微信上有点击返回不刷新页面的问题，处理起来比较麻烦，所以慎用！

 

相关文章：

微信浏览器左上角返回按钮的监听点击打开链接

微信里iphone后退不刷新问题解决方案，真实有效点击打开链接

HTML5 history新特性pushState、replaceState及两者的区别点击打开链接