本问答帖原创发布在华为开发者联盟社区 ，欢迎开发者前往论坛提问交流。

更多与该问题相关的讨论，请点击原帖查看：

Arkweb如何正确加载web的当前title-华为开发者问答 | 华为开发者联盟 (huawei.com)

问题描述：

使用arkweb时，onTitleReceive获取web的title和document.title不一致的，应该如何正确加载web的当前title？

解决方案：

【背景知识】

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

【解决方案】

• 方案一，在onTitleReceive或者onPageEnd中使用getTitle获取网页的标题。
• 方案二，通过runJavaScript执行JavaScript代码来获取文档的标题。

示例代码如下：

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脚本获取标题。

▶更多实践干货就在华为开发者联盟

▶扫码加入鸿蒙主题交流群，共同交流鸿蒙应用创新与开发