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

最新推荐文章于 2023-08-01 00:22:01 发布

原创最新推荐文章于 2023-08-01 00:22:01 发布 · 6.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5 #iphone微信后退不刷新 #微信 #javascript #pushStatereplaceState

本文介绍了在微信环境中H5页面遇到的返回卡死问题及其两种解决方法：通过刷新页面来解决卡顿，或者直接关闭当前窗口。此外，还对比了HTML5中pushState与replaceState的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

> 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替换当前。不会造成页面刷新。