celsius的个人博客

星星之火可以燎原

0%

h5监听页面展示隐藏返回

  1. 在开发中遇到了需要监听页面隐藏展示(比如切到后台又切回来),这个时候我立马想到onShow生命周期,不过反应过来这个是微信小程序的。如果想在h5里面监听的话,只需要加一个监听器

    1
    2
    3
    4
    5
    6
    7
    document.addEventListener('visibilitychange', async () => {
    if (document.visibilityState == 'visible') {
    //页面展示
    } eles {
    //页面隐藏
    }
    })

    解决了这个问题,又来了一个新的问题,比如我开发的A页面,从A页面跳转到B页面,再从B页面返回到A页面,这个使用上面所说的visibilitychange是监听不到的,因为本质上讲A页面并没有被隐藏,这里不展开细说,只说怎么解决,那就是用另一个事件监听 popstate

    1
    2
    3
    window.addEventListener('popstate', async () => {
    //监听到页面返回
    })

    好的,又把这个问题解决了,但是出现了一个新的问题,那就是如果我使用了vue-router,在单页面应用里进行路由跳转,因为链接的变化,路由跳转也会被认为是页面之间的切换,因此也会触发popstate这个监听。
    但这显然不是我想要的效果,因此我只好又拿出了另外一个事件监听: pageshow
    eg: 这里使用popstate也可以完成需求,用全局参数记录一下是否路由跳转就行

    1
    2
    3
    4
    5
    6
    window.addEventListener('pageshow', async () => {
    //监听到页面展示
    if (StoreModule.loadEnd) {//loadEnd为true即为页面加载完成
    //to do something
    }
    })

    pageshow,字面上就能看出是页面展示的意思,因此页面的最开始加载和从其他页面返回才会触发,而hash路由跳转的时候并不会触发,再用一个vuex保存一个页面是否加载完成的参数来判断,就能完美处理页面返回的监听处理逻辑了。