HarmonyOS 鸿蒙Next WebView加载h5有问题

HarmonyOS 鸿蒙Next WebView加载h5有问题 加载了一个h5页面。我们这边前端，在写h5的时候，使用了navigator.onLine方法来判断是否有网，如果没网，则h5展示无网络UI，如果有网，则展示正常h5。

使用鸿蒙系统加载h5的时候，navigator.onLine这个方法都是返回不在线，导致无法进入正常的h5页面。

navigator.onLine是一个通用方法，鸿蒙是不是不支持？或者有什么解决办法？

3 回复

可以用的，这边测试在线的

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

class WebObj {
  constructor() {}

  webTest(): string {
    console.log('Web test');
    return "Web test";
  }

  webString(): void {
    console.log('Web test toString');
  }
}

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController()
  @State webTestObj: WebObj = new WebObj();

  build() {
    Column() {
      Button('refresh')
        .onClick(() => {

          try {
            this.controller.refresh();
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: '', controller: this.controller })
        .javaScriptAccess(true)
        .onControllerAttached(() => {
          this.controller.loadUrl($rawfile("index.html"));
          this.controller.registerJavaScriptProxy(this.webTestObj, "objTestName", ["webTest", "webString"]);
        })
    }
  }
}

//index.html
<!-- index.html -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<button type="button" onclick="htmlTest()">Click Me!</button>
<p id="demo"></p>
<p id="webDemo"></p>
<script type="text/javascript">
function htmlTest() {
  if (navigator.onLine) {
    console.log("在线");
  } else {
    console.log("离线");
  }
}
</script>
</body>
</html>

更多关于HarmonyOS 鸿蒙Next WebView加载h5有问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


  1. 使用 navigator.onLine 属性和 online、offline 事件：

    • 使用场景：适用于简单的在线/离线状态检测，不需要精确判断用户是否真正连接到互联网。
    • 优点：简单易用，无需额外的网络请求。
    • 缺点：只能检测到用户设备是否连接到网络，无法判断是否真正连接到互联网。

  2. 使用 navigator.connection 对象：

    • 使用场景：适用于需要获取用户网络连接类型的场景，可以根据连接类型来做一些优化处理。
    • 优点：可以获取用户网络连接类型，提供更详细的网络连接信息。
    • 缺点：不同浏览器的兼容性不同，部分浏览器可能不支持。

  3. 使用心跳机制：

    • 使用场景：适用于需要实时判断用户在线状态的场景，可以通过定时发送请求来判断用户是否在线。
    • 优点：可以实时准确地判断用户是否在线。
    • 缺点：需要定时发送请求，增加服务器负载和网络流量。

  4. 使用 window.addEventListener 监听 online 和 offline 事件：

    • 使用场景：适用于需要在用户上线和下线时触发相应的处理函数的场景。
    • 优点：简单易用，无需额外的网络请求。
    • 缺点：只能监听到用户上线和下线的事件，无法判断是否真正连接到互联网。

  5. 使用 ping 请求：

    • 使用场景：适用于需要定时检测用户是否在线的场景，通过向服务器发送 ping 请求来判断用户是否在线。
    • 优点：可以定时检测用户是否在线。
    • 缺点：需要发送网络请求，增加服务器负载和网络流量。

  6. 使用 WebSocket 连接：

    • 使用场景：适用于需要实时判断用户在线状态的场景，通过建立 WebSocket 连接来实时通信。
    • 优点：可以实时准确地判断用户是否在线。
    • 缺点：需要建立和维护 WebSocket 连接，增加服务器负载和网络流量。

根据具体的需求和技术栈，可以选择最适合的方法来实现在线状态的检测。如果只需要简单的在线/离线状态检测，可以使用 navigator.onLine 属性和 online、offline 事件；如果需要更详细的网络连接信息，可以使用 navigator.connection 对象；如果需要实时判断用户在线状态，可以使用心跳机制或 WebSocket 连接；如果需要定时检测用户是否在线，可以使用 ping 请求。

在HarmonyOS（鸿蒙Next）中，WebView加载H5页面时可能会遇到问题，这些问题可能包括页面加载失败、页面渲染异常、JavaScript执行错误等。鸿蒙的WebView组件基于系统的渲染引擎，与Android的WebView有所不同，因此在兼容性上可能会有差异。

常见的问题原因及解决方向包括：

  1. 网络问题：确保设备的网络连接正常，H5页面的URL可以正常访问。
  2. 权限配置：检查是否在config.json中正确配置了网络权限（如ohos.permission.INTERNET）。
  3. H5页面兼容性：某些H5页面可能使用了与鸿蒙WebView不兼容的前端技术，需要调整H5页面的代码。
  4. WebView配置：鸿蒙的WebView提供了多种配置选项，如setJavaScriptEnabled、setDomStorageEnabled等，确保这些配置与H5页面的需求匹配。
  5. 内核版本差异：鸿蒙WebView的内核可能与开发者熟悉的浏览器内核不同，导致某些特性不支持或行为不一致。
  6. 调试工具：可以使用鸿蒙的开发者工具进行调试，查看具体的错误信息或日志。

如果问题持续存在，建议检查H5页面的兼容性及WebView的配置，并根据系统日志进行分析。

回到顶部