收藏
回答

小程序webview组件内嵌的H5页面的pageshow,事件监听问题

框架类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 web-view 客户端 无特定版本 基础库大于1.6.5

请问一个嵌套在小程序webview里面的h5页面,如何能够监听到当前这个webview的显示和隐藏事件呢?

比如说我这个小程序有四个tab,其中:


订单的page是一个嵌套的H5页面,现在我来回切换底部的四个tab,发现h5的pageshow,resume,visibilitychange等事件都不能很好的触发,要么就是有兼容性问题,要么就是只在页面加载时执行,之后切换显示就不执行了。请问有什么好的办法么?

回答关注问题邀请回答
收藏

3 个回答

  • 牛壮
    牛壮
    2021-06-29

    监听 visibilitychange;我这边是同时监听pageshow 和 visibilitychange,对最终执行的事件做了一个throttle处理。

    看下来,是因为小程序的webview 不会触发pageshow事件。

    const pageCacheBackHandler = useCallback(() => {
        throttle(doSomething());
      }, [doSomething]);
    
    const pageShowEventHandler = useCallback(
        (event) => {
          if (event && event.persisted) {
            pageCacheBackHandler();
          }
        },
        [pageCacheBackHanlder]
    );
    
    const visibilityStateChangeEventHandler = useCallback(() => {
        if (document.visibilityState == "visible") {
          pageCacheBackHandler();
        }
      }, [pageCacheBackHandler]); 
    
     useEffect(() => {
        window.addEventListener("pageshow", pageShowEventHandler);
        document.addEventListener(
          "visibilitychange",
          visibilityStateChangeEventHandler
        );
    
        return () => {
          window.removeEventListener("pageshow", pageShowEventHandler);
          document.removeEventListener(
            "visibilitychange",
            visibilityStateChangeEventHandler
          );
        };
      }, [
        pageShowEventHandler,
        visibilityStateChangeEventHandler,
      ]);
    
    2021-06-29
    有用 1
    回复 2
    •  
       
      2021-11-12
      没用呀,两个都监听不到呢
      2021-11-12
      回复
    • 路明非
      路明非
      2023-05-20
      亲测可以!答主威武!说没监听到的,可以试试用真机测试
      2023-05-20
      回复
  • sun
    sun
    2020-04-20

    能解决了吗

    2020-04-20
    有用
    回复 1
  • Blues, さようなら
    Blues, さようなら
    2018-03-08

    顶一下 比较着急

    2018-03-08
    有用
    回复 2
    • 云野
      云野
      2019-02-14

      找到好的办法了吗

      2019-02-14
      回复
    • Blues, さようなら
      Blues, さようなら
      2020-04-20回复云野
      并没有  放弃了
      2020-04-20
      回复
登录 后发表内容