HarmonyOS鸿蒙Next中web组件加载H5页面时，如何获取该页面的标题？

HarmonyOS鸿蒙Next中web组件加载H5页面时，如何获取该页面的标题？

3 回复

非常简单，一行代码搞定：this.controller.getTitle();

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  build() {
    Column() {
      Button('getTitle')
        .onClick(() => {
          try {
            let title = this.controller.getTitle();
            console.info("title: " + title);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中web组件加载H5页面时，如何获取该页面的标题？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，使用Web组件加载H5页面时，可以通过注册onTitleReceive事件回调来获取页面标题。当H5页面标题发生变化时，该回调会被触发，返回的标题信息可通过事件参数获取。具体实现需在Web组件上设置onTitleReceive事件监听，并在回调函数中处理接收到的标题数据。

在HarmonyOS Next中，可以通过Web组件的onTitleReceive回调来获取H5页面的标题。具体实现如下：

  1. 在ArkTS中创建Web组件并设置回调：
Web({
  src: 'https://example.com'
})
.onTitleReceive((title: string) => {
  console.info('Received page title: ' + title);
  // 在这里处理获取到的标题
})
  1. 当H5页面标题发生变化时，系统会自动触发该回调，将最新标题作为参数传入。

这种方式不需要额外配置，适用于大多数H5页面。如果页面使用JavaScript动态修改标题，回调也会被正确触发。

回到顶部