uni-app 内嵌的webview无法返回

uni-app 内嵌的webview无法返回

操作步骤：

  • 跳转内嵌的webview页面后无法返回

预期结果：

  • 跳转到内嵌的webview页面后，代码返回。

实际结果：

  • 跳转到内嵌的webview页面后，代码返回无效

bug描述：

uni.navigateTo({
url: "/pages/webview/webview?origin=" + this.kformUrl + "/kFormDesign/index&urlParams=" + JSON.stringify(params)
})
app页面通过这种方式跳转webview页面，嵌套的webview页面的路由配置如图2，内嵌的webview页面图1.导航返回和事件返回都不管用。

图片

image image

项目信息表

项目信息 值
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.1.12
手机系统 Android
手机系统版本号 Android 11
手机厂商 华为
手机机型 红米note9pro
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app 内嵌的webview无法返回的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

plusMessage 回调里打印uni.navigateBack看会不会undefined
或者回调函数使用箭头函数试试！ plus.globalEvent.addEventListener(‘plusMessage’, (msg) => {

})

更多关于uni-app 内嵌的webview无法返回的实战教程也可以访问 https://www.itying.com/category-93-b0.html


可以打印出来，是个函数

特定机型出现还是特定 url 出现？

在uni-app中，Webview页面返回失效通常与页面栈管理或事件绑定有关。根据你的代码和配置，以下是关键排查点：

  1. 检查页面栈
    uni.navigateTo会保留当前页面，可能导致Webview页面无法直接返回。如果Webview是二级页面，尝试使用uni.redirectTo替代，关闭当前页再跳转。

  2. Webview内返回逻辑

    • 确保Webview页面中绑定了返回事件（如导航栏返回按钮或物理返回键）。
    • 在Webview页面的onBackPress生命周期中添加返回处理：
      onBackPress() {
  // 获取Webview对象并执行返回
  const webview = this.$mp.page.$getAppWebview();
  if (webview) {
    const currentWebview = webview.children()[0];
    if (currentWebview && currentWebview.canBack()) {
      currentWebview.back();
      return true; // 阻止默认返回行为
    }
  }
  return false; // 允许默认返回
}

  3. 路由配置验证
    确认pages.json中Webview页面的style配置启用了导航栏，且"navigationBarTitleText"未覆盖返回按钮。

  4. 物理返回键监听
    在Android端，需监听硬件返回键事件，并在Webview内实现后退：

    document.addEventListener('backbutton', () => {
  const webview = plus.webview.currentWebview();
  if (webview && webview.canBack()) {
    webview.back();
  } else {
    plus.runtime.quit();
  }
}, false);

  5. URL参数传递问题
    检查跳转时传递的URL参数是否包含特殊字符（如&），可能导致解析错误。使用encodeURIComponent对参数编码：

    uni.navigateTo({
  url: "/pages/webview/webview?origin=" + encodeURIComponent(this.kformUrl) + "&urlParams=" + encodeURIComponent(JSON.stringify(params))
});
回到顶部