微信h5页面返回时ios不刷新页面解决方案

在做微信h5页面的时候，我们需要返回时刷新前一个页面的数据，比如在页面A点击支付按钮跳转到页面B，从页面B返回时要获取当前订单的支付状态防止重复支付。

在安卓手机上不会有困扰，因为安卓手机在微信h5中返回都会刷新页面，而由于ios手机上的微信webView版本的问题，返回时会直接从缓存中拿而不会刷新页面。

解决这一问题想到了vue-router，vue-router不就是有路由钩子吗？它主要用的history的popstate/pushstate事件，具体的大家可以自行搜索用法，其兼容性可访问下面地址查看，基本大部分都可以支持

点击查看popstate兼容性

还有一种方式就是监听pageshow和pagehide事件，但是兼容性不太好，但我们可以作为当popstate不支持时的方案，万一不支持popstate的手机支持pageshow呢

点击查看pageshow兼容性

整理后的代码如下

1.在跳转的位置做处理

// 在调跳转的时候调用replaceState，只有调用了replaceState或者pushState的才会在返回时触发popstate事件，使用pushState会多一个历史记录，所以使用replaceState
window.history.replaceState('', '', location.href);
// 在跳转到你想去的页面
window.location.href = 'xxx';

2.在页面添加监听事件

// 在当前页面添加popstate监听事件，popState不支持的时候调pageshow和pagehide
if (supportsPopState()) {
	window.addEventListener('popstate', () => {
		// 你想做的刷新事件，一般会重新调用数据接口什么的
		 // 注意最好不要在这里调reload，因为有时候一进页面就会调popstate事件，最好只是重新调一下接口
	});
} else {
	// 不支持就监听pageshow事件，再不行就没办法了
	const isPageHide = false; // 用isPageHide标识是否离开过
  
	window.addEventListener('pageshow', () => {
		if (isPageHide) {
			// 你想做的刷新事件，一般会重新调用数据接口什么的
			// 需要重新将isPageHide标识重置为false
			isPageHide = false;
		}
	});
	window.addEventListener('pagehide', () => {
		isPageHide = true;
	});
}

/**
 * 判断是否支持popstate事件
 */
function supportsPopState() {
	const ua = window.navigator.userAgent;

	if (
		(ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1)
		&& ua.indexOf('Mobile Safari') !== -1
		&& ua.indexOf('Chrome') === -1
		&& ua.indexOf('Windows Phone') === -1
	) {
		return false;
	}

	return window.history && 'pushState' in window.history;
}