Arkweb如何正确加载web的当前title 官方
头像 鸿蒙小助手 2026-04-14 15:53:32    发布
6337 浏览 32 点赞 5 收藏

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

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

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

问题描述:

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

解决方案:

【背景知识】

  • 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
头像

鸿蒙小助手

致力于为鸿蒙开发者谋福利

1031

帖子

7

提问

13565

粉丝

关注
最新发布

MCP+Rules:AI辅助鸿蒙应用开发实践

2026-04-17 10:25:25    发布
热门推荐
地址:北京市朝阳区北三环东路三元桥曙光西里甲1号第三置业A座1508室 商务内容合作QQ:2291221 电话:13391790444或(010)62178877
版权所有:电脑商情信息服务集团 北京赢邦策略咨询有限责任公司
声明:本媒体部分图片、文章来源于网络,版权归原作者所有,我司致力于保护作者版权,如有侵权,请与我司联系删除

京ICP备:2022009079号-2

京公网安备:11010502051901号

ICP证:京B2-20230255