解决思路:
判断机型
跳转前将 动态构建的页面内容缓存在sessionStorage中
页面加载时,先从sessionStorage中获取数据
存在缺陷:
抑制了在窗口刷新能力
点击刷新,页面动态数据仍保持,不会刷新重新获取。只能关闭,重新打开
/**
* resloveWechatAndroidReturnRefresh
* @param {*} querySelector 要缓存的容器
* @param {*} key sessionItem key
* @param {*} fetchContent 动态构建页面内容方法
*/
function resloveWechatAndroidReturnRefresh(querySelector, key, fetchContent ) {
// 是否微信
function isWx() {
return /MicroMessenger\/(\d+\.\d+\.\d+)[\.\s]?/i.test(navigator.userAgent)
}
// 是否安卓
function isAndroid() {
return /android/i.test(navigator.userAgent)
}
if (isWx() && isAndroid()) {
const storageContent = sessionStorage.getItem(key)
if (storageContent) {
document.querySelector(querySelector).innerHTML = storageContent
} else {
fetchContent()
}
window.onbeforeunload = function() {
const catchContent = document.querySelector(querySelector).innerHTML
if(catchContent ) window.sessionStorage.setItem(key, catchContent)
}
} else {
fetchContent()
}
}
使用:
在js中调用
$(function(){
resloveWechatAndroidReturnRefresh('#new', '202205_new', fetchDataAndBuildHtml)
})
开启调试工具
<script src="https://cdn.staticfile.org/vConsole/3.13.0/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
</script>