（带效果动图）H5在详细页点返回，返回时列表页停留在原来的位置

前言

• 有了vue以后，我H5都是用vue写了，然后使用vant(轻量、可靠的移动端 Vue 组件库)布局，一个网页就特别容易的完成了，然后就是要优化网页。
• 在工作中，H5主要被用来内嵌进移动端（ios、小程序、安卓)，而各大应用中，用的最多的数据结构就是列表。用H5做列表网页，有一个很大的弊端就是：往下滑列表，然后点击跳转到详情网页再返回时，会发现列表页刷新并返回顶部了。
• 这个弊端和浏览器有关系。（具体原因感兴趣的自查百度）
  • Microsoft Edge浏览器就能返回时列表停留在原来的位置
  • 红米手机上自带的浏览器也能返回时列表停留在原来的位置
  • 谷歌浏览器返回时就会刷新页面滑到顶部
  • ios、安卓的webview返回时就会刷新页面滑到顶部（如微信内部访问网页）

未优化前效果展示

在微信内部浏览器，往下滑列表，然后点击跳转到详情网页再返回时，会发现列表页刷新并返回顶部了，如图所示：

优化后效果展示

还是在微信内部浏览器

实现

思路

• 既然是因为跳转到新的网页然后返回才会导致这个问题，我就不让跳到新网页，直接在原网页里内嵌。内嵌网页的方式：iframe。
• 做到内嵌网页后，我们要实现点击安卓手机的返回键能够把这个内嵌网页关掉。应该有很多种方式，我自己做的是：监听返回键事件，然后执行自己的操作。

代码

1、html 代码

说明：

• 有一个大盒子div，宽度高度与屏幕一样，即全屏（width: 100%; height: 100%;），显示位置置前（position: fixed; z-index: 999;），这两条一定要。
• 居中 display: flex; justify- content: center;  align-items: center;
• showPage 来控制内嵌网页的显示与隐藏。
• iframe 的宽高为父容器的100%，即全屏。src放入子页面的url路径。

<div v-if="showPage == '1' " style="position: fixed; z-index: 999;display: flex; justify-    
    content: center;  align-items: center; background: white; width: 100%; height: 100%;">

    <iframe frameborder=0 width=100% height=100% :src="subPage"></iframe>

</div>

2、javascript vue 代码

说明：按照思路

• 用变量showPage 来控制内嵌网页的显示与隐藏；
• pushHistory()放入停留在之前浏览的位置的url，这个一定不要漏，不然返回的时候就直接退出列表页了！
• 监听返回键：返回上一个网页的事件是无法拦截的，所以我们只能添加停留在之前浏览的位置的url也就是原url+#，然后在返回键事件里把内嵌网页隐藏掉，我们就能成功的使H5返回时不刷新页面，列表保持在原来的位置。

data: {
    showPage: "0", // showPage初始化，0隐藏，1显示
    ......
}

methods: {
    // 使用pushState方法往history里增加url链接：原url加个#,还是原页面并且停留在之前浏览的位置
    pushHistory() {
        var state = {
            title: "title",
            url: "#"
        }
        window.history.pushState(state, "title", "#");
    },

    // 打开内嵌网页
    getScore(name, score) {
        const that = this
        // 内嵌网页的url
        that.subPage = 'score.html?name=' + name +'&score=' + score
        // 内嵌网页显示
        that.showPage = '1'
        // 放入停留在之前浏览的位置的url，这个一定不要漏，不然返回的时候就直接退出列表页了！
        that.pushHistory()
        // 监听返回键
        window.addEventListener("popstate", function(e) {
            // 内嵌网页隐藏
            that.showPage = '0'
        })
    },

    // 打开另一个内嵌网页 
    getRatings(name, date) {
        const that = this
        that.subPage = 'ratings.html?name=' + name + '&date=' + date;
        that.showPage = '1'
        that.pushHistory()
        window.addEventListener("popstate", function(e) {
            that.showPage = '0'
		})
    },
    ......
}

3、内嵌网页，标题栏的返回按钮点击事件（ios不像安卓手机那样屏幕底部有返回键，所以网页顶部要布置一个返回按钮）

onBack() {
    window.history.back(-1);//返回上一层
},

参考资料

JS监听浏览器的返回事件_柏灿的博客-CSDN博客_监听浏览器返回事件