HarmonyOS鸿蒙Next中Arkweb如何正确加载web的当前title

HarmonyOS鸿蒙Next中Arkweb如何正确加载web的当前title 我使用arkweb的onTitleReceive获取web的title发现并不是和document.title是一致的，而且onTitleReceive经常会返回url字符串，请问这种问题应该如何应对？

.onTitleReceive((event) => {
  if (event) {
    const webTitle = event.title
  } 
})
3 回复

【背景知识】

  • Web组件: 提供具有网页显示能力的Web组件，在显示网页时提供了多个事件用于获取网页信息，如：onTitleReceive网页document标题更改回调，可以在此事件中获取加载的网页的标题，当H5未设置<title>元素时会返回对应的url。
  • Webview: Webview提供Web控制能力，如：通过getTitle获取当前网页的标题。

【解决方案】

示例代码如下：

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

@Entry
@Component
struct Index {
  wController: webview.WebviewController = new webview.WebviewController();
  @State url: string = 'https://developer.huawei.com/consumer/cn/doc/'

  build() {
    Column() {
      Column() {
        Web({ src: this.url, controller: this.wController })
          .fileAccess(true)
          .javaScriptAccess(true)
          .domStorageAccess(true)  // 设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。
          .overviewModeAccess(true)
          .verticalScrollBarAccess(false)
          .onTitleReceive((event) => {
            if (event) {
              // 方式一：在onTitleReceive回调中使用getTitle获取标题
              console.info('onTitleReceive title: ', this.wController.getTitle());
            }
          })
          .onPageEnd(() => {
            // 方式二：在onPageEnd回调中使用getTitle获取标题
            console.info('onPageEnd title：', this.wController.getTitle())
            // 方式三：通过runJavaScript执行JavaScript脚本获取标题
            // 异步执行JavaScript脚本，并通过回调方式返回脚本执行的结果
            this.wController.runJavaScript('document.title', (error, result) => {
              if (error) {
                console.error(`Failed to do sth. Code is ${error.code}, message is ${error.message}`);
              } else {
                console.info('Page title:', result);
              }
            });
          })
      }
      .width('100%')
      .height('100%')
    }
  }
}

示例代码运行结果如下：

onTitleReceive title:  文档中心-HarmonyOS NEXT开发文档-华为开发者联盟
onPageEnd title： 文档中心-HarmonyOS NEXT开发文档-华为开发者联盟
Page title: "文档中心-HarmonyOS NEXT开发文档-华为开发者联盟"

【常见FAQ】

Q：onTitleReceive中通过getTitle获取标题为什么返回的是url？ A：getTitle返回的是网页url，是因为当前网页未设置title。

Q：在Web加载网页过程中通过getTitle获取网页标题有时会获取到url，因为标题是实时刷新的不希望在加载网页过程显示为url，如何解决？ A：可以在onTitleReceive通过runJavaScript执行JavaScript脚本获取标题。

更多关于HarmonyOS鸿蒙Next中Arkweb如何正确加载web的当前title的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，ArkWeb通过onTitleReceive回调获取当前Web页面的title。使用ArkWeb组件时，需在webController中设置该回调。示例代码：

webController.onTitleReceive((title: string) => {
  console.log("Current title: " + title);
});

该回调会在页面标题变化时自动触发，无需主动调用加载方法。确保ArkWeb组件已正确初始化并加载URL，title信息将通过异步回调返回。若需实时监听title变化，需保持回调注册状态。

在HarmonyOS Next的ArkWeb中，onTitleReceive获取的title与document.title不一致是常见现象。这是因为：

  1. onTitleReceive的title来源取决于网页实现，可能来自：

    • HTML的 <title> 标签
    • 网页通过JS动态设置的title
    • 某些框架（如Vue/React）的router机制

  2. 当返回URL字符串时，通常是因为：

    • 网页未正确设置title
    • 网页加载未完成
    • 某些SPA应用路由切换时的中间状态

建议解决方案：

  1. 优先使用document.title获取最新title：

    webController.executeScript({
  script: 'document.title',
  callback: (title) => {
    // 处理获取到的title
  }
});

  2. 结合onTitleReceive做兼容处理：

    .onTitleReceive((event) => {
  if (event && !event.title.startsWith('http')) {
    // 过滤掉URL类型的title
    const webTitle = event.title
  }
})

  3. 对于SPA应用，建议监听页面加载完成事件后再获取title。

回到顶部