HarmonyOS鸿蒙Next中web组件跳转无法返回上一页

HarmonyOS鸿蒙Next中web组件跳转无法返回上一页

index页面使用web组件加载test.html, 点击index页面的test跳转test1.html，test1.html页面中点击返回可以返回到test.html，但无法通过webViewController.backward()返回到test.html

示例代码如下： src/main/ets/pages/index.ets

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct Index {
  @State webViewController: web_webview.WebviewController = new web_webview.WebviewController();
  onBackPress() {
    this.webViewController.backward();
    return true
  }
  build() {
    Column() {
      Text('test').onClick(() => {
        this.webViewController.runJavaScript('jump()')
      })
      Web({ controller: this.webViewController, src: $rawfile('test.html') }).domStorageAccess(true)
        .javaScriptAccess(true)
    }
  }
}

src/main/resources/rawfile/test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
test
<script type="text/javascript">
    window.jump = () => {
        window.location.href = './test1.html'
    }
</script>
</body>
</html>

src/main/resources/rawfile/test1.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body style="fontsize: 30">
<button onclick="back()">返回</button>
test1
<script type="text/javascript">
    function back() {
        window.history.go(-1)
    }
</script>
</body>
</html>

更多关于HarmonyOS鸿蒙Next中web组件跳转无法返回上一页的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复
  1. onBackPress 方法一般结合 accessBackward 方法一起使用，判断是否可跳转。
let result = this.webviewController.accessBackward();

console.error(`accessBackward：${result}`);

if(result){
    this.webviewController.backward();
}

return true

  1. 如果在 test.html 页面使用 textinput 或者 button 类标签进行操作，那么也是可以通过 backward 返回的；

  2. 在 test.html 页面直接使用点击事件跳转，是一定可以触发的；如果在 test 页面什么都不做，直接通过原生调用 JS 的方式从 test 跳转到 test1，accessBackward 返回的是 false，不可跳转。

<button style="width:200px;height:50px" onclick="pushtest1()">webview 页面跳转 test1 中</button>

<script type="text/javascript">
    function pushtest1() {
        window.location.href = './test1.html'
    }
</script>

更多关于HarmonyOS鸿蒙Next中web组件跳转无法返回上一页的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用Web组件进行页面跳转后无法返回上一页，可能是由于页面栈管理问题或Web组件的生命周期控制不当导致的。鸿蒙Next的Web组件基于WebView实现，页面跳转时，如果未正确处理页面栈或未保存历史记录，可能会导致无法返回上一页。

检查以下可能的原因：

  1. 页面栈未正确管理：鸿蒙Next的页面栈管理机制需要开发者手动处理页面跳转和返回逻辑。如果未在跳转前保存当前页面状态，可能会导致无法返回。

  2. Web组件的历史记录未启用：Web组件默认可能未启用历史记录功能，导致无法记录页面跳转历史。可以通过设置WebView的相关属性来启用历史记录。

  3. 页面生命周期未正确处理：在页面跳转时，未正确处理onBackPress事件或页面生命周期回调，可能导致返回功能失效。

  4. Web组件的缓存问题：Web组件的缓存机制可能导致页面状态丢失，建议检查缓存设置，确保页面状态得以保存。

可以通过以下方式解决：

  • 在页面跳转前，确保当前页面状态已保存。
  • 启用Web组件的历史记录功能，确保页面跳转历史得以记录。
  • 在onBackPress事件中，手动处理返回逻辑，确保页面栈得以正确管理。
  • 检查并调整Web组件的缓存设置，确保页面状态不会丢失。

这些问题通常与鸿蒙Next的页面管理和Web组件的配置相关，需根据具体场景进行调试和优化。

在HarmonyOS鸿蒙Next中，如果使用Web组件进行页面跳转后无法返回上一页，可能是未正确处理页面历史记录。你可以通过以下步骤解决：

  1. 启用历史记录：确保Web组件的setHistoryRecordEnable(true)已启用，以记录浏览历史。
  2. 监听返回事件：在Web组件中重写onBackPressed()方法，调用goBack()实现返回上一页。
  3. 检查页面加载：确保页面加载完成后才执行返回操作，避免在加载过程中返回。

如果问题仍未解决，建议检查Web组件的配置及页面加载逻辑。

回到顶部