popstate android4.3,微信安卓popstate后退导致页面刷新解决方案

问题描述：

在安卓机微信版本号为7.0.4到7.0.8下监听popstate事件时，当点击物理键返回时,浏览器会强制页面刷新，导致popstate中定义的一些事件因为刷新而受影响，比如出现弹窗闪退现象。

解决方案

在popstate中使用localStorage.setItem，当页面刷新之后拿到localStorage.getItem的值，可以判断是否点击物理键(即返回按钮)返回的。

此方法对有问题的版本号进行兼容操作,通过也可以兼容ios或安卓其他版本号的返回事件。

var wxPopState = (function() {

// 返回时浏览器强制刷新的微信版本号

var problemVersions = ['7.0.4', '7.0.5', '7.0.6', '7.0.7', '7.0.8'];

// 设置缓存的key值

var setItemKeyName = '_wx_popstate';

// 判断当前是否为有命中的版本

var isProblemVersion = !!~problemVersions.indexOf(getWxVersion());

// 处理后返回刷新的回调,即相当在popstate中定义的事件

var callback = null;

// 获取微信版本号

function getWxVersion() {

return navigator.userAgent.match(/MicroMessenger\/(\d+\.\d+\.\d+)[\.\s]/)[1];

}

// push历史栈

function pushState() {

var state = {

title: "",

url: "#"

};

window.history.pushState(state, state.title, state.url);

}

return {

register: function(options) {

var needPushState = options.needPushState;

callback = options.callback;

if (!callback) {

return

}

// 通过setItemKeyName的值可以判断是否为按键返回的。

// 如果值存在，将执行后退定义的事件，并且不再注册返回事件和推入历史栈。

// 如果值不存在，将注册返回时需要设置的操作。

if (localStorage.getItem(setItemKeyName)) {

this.popstateEven();

return

}

if (needPushState) {

pushState();

}

window.addEventListener('popstate', function() {

// 有问题版本的处理

if (isProblemVersion) {

// 设置这一步非常重要,为了判断是否为按键返回的

localStorage.setItem(setItemKeyName, '1');

// 这一步的目的是以上有问题的版本返回时会刷新

// 为确保其一定刷新操作,可以考虑设置以下方法

window.location.reload();

return

}

// 非问题版本将进行正常注册逻辑

callback && callback();

})

},

popState: function() {

window.history.go(-1);

},

popstateEven: function() {

if (!isProblemVersion) {

return

}

// 以上版本物理返回时将执行register里定义的callback函数

callback && callback();

localStorage.setItem(setItemKeyName, '');

}

}

})();

wxPopState.register({

needPushState: true, // 是否需要推入历史栈,如果页面中已有此操作,则可忽略此参数

callback: function() {

// do something

}

});

复制代码

参与贡献者：zeifenbing

参考资料

如需转载，请注明来源。

如有纰漏，请在留言区留言哦。

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[微信安卓popstate后退导致页面刷新解决方案]http://www.zyiz.net/tech/detail-113555.html