uni-app 嵌套h5页面能正常滑动但是不能返回

uni-app 嵌套h5页面能正常滑动但是不能返回

操作步骤：

  • 点击代办，随机点击一个任务进行跳转，有时候能返回，有时候不行，隔一会又好了以及重启手机也可以。

预期结果：

  • 无

实际结果：

  • 无

bug描述：

  • uniapp 嵌套h5,页面能正常滑动，但是不能返回（手机侧滑以及代码返回都不行），客户暂时只在这一机型上提出。

图片

image

项目 信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10 1909
HBuilderX类型 正式
HBuilderX版本号 4.66
第三方开发者工具版本号 1.06.2504010 win32-x64
基础库版本号 3.8.12
项目创建方式 HBuilderX
App下载地址或H5网址 http://xoa.zzots.cn//files/20250211/7652e9b3503a4ecaaf54b6b01ee07b1f.apk

更多关于uni-app 嵌套h5页面能正常滑动但是不能返回的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

你的代码是怎么写的？

更多关于uni-app 嵌套h5页面能正常滑动但是不能返回的实战教程也可以访问 https://www.itying.com/category-93-b0.html


就web-view 加载一个h5，然后h5里面返回不了，其他客户没反应这个问题 <web-view id=“webview” :src=“urls” update-title=“false” @message=“message” :webview-styles=“webviewStyles”> </web-view>

这是一个典型的uni-app嵌套H5页面时出现的路由管理问题。从描述看，页面能正常滑动但返回功能失效，且只在特定机型出现，表明问题与系统级手势和uni-app路由栈的交互有关。

可能原因分析：

  1. H5页面history状态异常：嵌套的H5页面可能修改了浏览器的history栈，导致uni-app无法正确识别当前路由层级。

  2. 页面生命周期冲突：H5页面的加载/卸载事件与uni-app的页面生命周期（如onShow/onHide）产生时序冲突。

  3. 手势事件被拦截：H5页面可能阻止了touch事件的冒泡传递，影响系统侧滑返回的识别。

解决方案：

  1. 在H5页面中添加返回控制： 在H5页面中主动监听返回事件，通过uni-app的API触发返回：

    // H5页面中
if (window.history && window.history.pushState) {
  history.pushState(null, null, document.URL);
  window.addEventListener('popstate', function() {
    uni.navigateBack();
  });
}

  2. 使用webview组件替代嵌套： 考虑使用<web-view>组件而非iframe或直接嵌套，uni-app对webview有更好的路由管理支持。

  3. 在uni-app页面中增强返回处理：

    onBackPress(options) {
  if (options.from === 'navigateBack') {
    return false;
  }
  this.back();
  return true;
}
回到顶部