评论

小程序内嵌H5页面跳转至小程序页面,再返回到H5页面不刷新问题解决方案

内嵌H5跳转到小程序页面,再返回H5后,数据刷新问题

需求:类似常见的电商页面,从首页跳转至H5页面,在H5页面展示商品列表,点击某个商品进入小程序商品详情页

1.小程序->2.h5->3.小程序

问题是从3返回到2时,H5页面自带的监听页面可见的函数无效,如图所示:

//监听页面显示隐藏
document.addEventListener(visibilitychange, this.isShow);

无法触发此类函数,类似的还有pageshow等等。

想在页面解决该问题,不通过即时通信的话,就只有两种方案

  1. 刷新webview所在的小程序页面,在onshow时更新webview
  2. 触发H5显示隐藏的监听

由于尝试了各种监听事件均无效,因此放弃了方案2,如果有什么好办法欢迎留言。

方案一具体实现:
回退可以触发onshow函数,定义一个变量,如时间戳,加在webview的url后边,url发生改变,H5页面重新加载,可以达到更新页面的目的。

onShow() {
      this.version = (new Date()).valueOf();
      this.url = www.baidu.com+this.version;
 }

但是这种做法有个很严重的问题,改变url 会增加webview的history,在webview所在页面,点击后退,会返回之前的H5页面,用户可以多次点击才能回到首页。


因此想到了在这个页面onhide的时候,移除webview组件,页面重新显示后,再增加改组件,这样就解决了这个问题。

点赞 4
收藏
评论

5 个评论

  • 3.
    3.
    2019-12-03

    onhide 将URl 赋值空的时候

    页面会报错.

    2019-12-03
    赞同 1
    回复 3
    • ๑瑶&玲๑
      ๑瑶&玲๑
      2020-03-10
      请问还有什么办法呢,我也遇见了这个问题
      2020-03-10
      1
      回复
    • 3.
      3.
      2020-03-10回复๑瑶&玲๑
      url添加时间戳 h5去监听
      2020-03-10
      回复
    • 为爱走天涯
      为爱走天涯
      2022-12-13
      我单独定义了一个变量来控制web-view的显隐, 同上onHide时置为false
      2022-12-13
      回复
  • 帅可帅非常帅也
    帅可帅非常帅也
    06-24

    wx:if 这个方法试了 不行 webview加载不出来了,请问一下还有其他方案吗

    06-24
    赞同
    回复
  • 🌙
    🌙
    03-20

    现在给URL赋值为空再重新赋值也没用了 不知道是不是基础库的问题 我以前用这个方法行 现在不行了

    03-20
    赞同
    回复
  • 吞吞
    吞吞
    2020-12-09

    我的个人解决方案,只刷新当前h5,不刷新整个webview

    1、h5跳转到小程序的时候,在h5页面显示一个遮盖层,遮盖层绑定点击刷新的事件,然后跳转到小程序。

    2、当从小程序返回到h5的时候,只需要点击屏幕一下就可以主动刷新当前页面了


    2020-12-09
    赞同
    回复 1
    • 想飞
      想飞
      2023-06-25
      要点多一下,不完美呢
      2023-06-25
      回复
  • 2019-11-26

    请问,小程序嵌入h5页面,h5页面和h5页面之间的跳转如何让返回的时候刷新页面?h5与h5页面是通过wx.miniProgram.navigateTo(),通过一个小程序页面做中转的页面,但是js是写在h5页面上的.

    2019-11-26
    赞同
    回复 2
登录 后发表内容