uniapp webview 返回键如何处理

在uniapp中使用webview加载H5页面时，如何正确处理安卓设备的物理返回键？目前点击返回键会直接退出整个应用，但需求是希望返回键能先关闭webview内的历史页面，全部关闭后再退出webview。是否有监听返回键的解决方案？需要兼容安卓和iOS平台。

2 回复

在uniapp的webview中，处理返回键可以通过监听页面返回事件实现。在onBackPress生命周期中判断当前页面是否为webview，如果是则调用webview的back()方法返回上一页，否则正常返回。


在 UniApp 的 Webview 组件中，处理返回键（如 Android 物理返回键或导航栏返回按钮）需要结合页面栈和 Webview 的内部控制逻辑。以下是处理步骤和示例代码：

核心思路

  1. 监听返回键事件：使用 onBackPress 生命周期函数。
  2. 判断 Webview 内是否可后退：通过 evalJS 执行 JavaScript 检查 Webview 历史记录。
  3. 控制行为：如果 Webview 可后退，则优先在 Webview 内后退；否则关闭当前页面。

示例代码

在包含 Webview 的页面中（如 /pages/webview/webview.vue）：

<template>
  <view>
    <web-view :src="url" ref="webview"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com' // 替换为你的网页地址
    }
  },
  onBackPress(options) {
    // 获取 Webview 组件实例
    const webview = this.$refs.webview;
    if (webview) {
      // 向 Webview 注入 JS 检查历史记录
      webview.evalJs('history.length > 1', (canGoBack) => {
        if (canGoBack) {
          // Webview 内后退
          webview.evalJs('history.back()');
        } else {
          // 无历史记录，关闭当前页面
          uni.navigateBack();
        }
      });
      // 阻止默认返回行为
      return true;
    }
  }
}
</script>

注意事项

  • 兼容性：evalJS 方法在部分平台（如 iOS）可能受限，建议在实际设备测试。
  • 性能：频繁执行 evalJS 可能影响性能，避免在快速连续点击时使用。
  • 备选方案：如果 evalJS 不可靠，可考虑通过 postMessage 与网页通信，让网页主动通知历史状态。

简化方案（无历史检查）

如果不需要精确控制，可直接在 Webview 内后退并始终阻止默认返回：

onBackPress() {
  this.$refs.webview.evalJs('history.back()');
  return true; // 阻止页面返回
}

根据需求选择合适方案，确保用户体验流畅。

回到顶部