Web组件加载网页如何获取网页的标题及标题来源
=======================

#### 问题现象

Web组件加载网页可以通过什么方式获取网页的标题以及标题来源？

#### 背景知识

*   [onTitleReceive](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-basic-components-web-events#ontitlereceive)：当页面文档标题<title>元素发生变更时，触发回调。若当前页面未显示设置标题，ArkWeb将在加载完成前基于页面的URL生成标题并返回给应用。
*   [getTitle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-webview-webviewcontroller#gettitle)：获取当前网页的标题。
*   [OnTitleReceiveEvent](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-basic-components-web-i#ontitlereceiveevent12)：定义网页document标题更改时触发该回调。

#### 解决方案

1.  获取网页标题来源：
    
    onTitleReceive的callback回调参数OnTitleReceiveEvent中的isRealTitle表示document标题来源，true表示来自网页的title标签，false表示该title是根据URL自动生成，默认返回为false。
    
    import { webview } from '@kit.ArkWeb';
    
    @Entry
    @Component
    struct WebComponent {
      controller: webview.WebviewController = new webview.WebviewController();
    
      build() {
        Column() {
          Web({ src: 'www.example.com', controller: this.controller })
            .fileAccess(false)
            .geolocationAccess(false)
            .domStorageAccess(true)
            .onTitleReceive((event) => {
              if (event) {
                console.info(\`title:${event.title}, is from title: ${event?.isRealTitle}\`);
              } else {
                console.error('onTitleReceive callback error');
              }
            });
        };
      }
    }
    
2.  根据场景，获取网页标题有以下三种方式：
    
    *   如果当前网页标题发生了改变，可以在onTitleReceive事件中直接获取。
    *   如果是正常网页加载，可以在[onPageEnd](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-basic-components-web-events#onpageend)中使用getTitle获取网页的标题。
    *   通过[runJavaScript](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-webview-webviewcontroller#runjavascript)执行JavaScript代码来获取文档的标题。
    
    import { webview } from '@kit.ArkWeb';
    
    @Entry
    @Component
    struct Index {
      wController: webview.WebviewController = new webview.WebviewController();
      @State url: string = 'xxx'; _// 实际场景请替换为可访问地址_
    
      build() {
        Column() {
          Column() {
            Web({ src: this.url, controller: this.wController })
              .geolocationAccess(false)
              .fileAccess(true)
              .javaScriptAccess(true)
              .domStorageAccess(true) _// 设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。_
              .overviewModeAccess(true)
              .verticalScrollBarAccess(false)
              .onTitleReceive((event) => {
                if (event) {
                _  // 方式一：在onTitleReceive回调中获取标题，只有当网页标题发生变化时触发_
                  console.info(\`onTitleReceive title: ${event.title}\`);
                }
              })
              .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 get title. Code is ${error.code}, message is ${error.message}\`);
                  } else {
                    console.info('Page title:', result);
                  }
                });
              });
          }
          .width('100%')
          .height('100%');
        };
      }
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f/v3/3OTFl8eSRLWTJ8iaMEqkyQ/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T134147Z&HW-CC-Expire=86400&HW-CC-Sign=F217C2C4490532661EF49C47280D61989B2397DC8C37841408A1A0CF79A324A6)
    
    访问在线网页时需添加网络权限：[ohos.permission.INTERNET](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/permissions-for-all#ohospermissioninternet)，具体申请方式请参考[声明权限](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/declare-permissions)。
    

#### 常见FAQ

Q：onTitleReceive或者是通过getTitle获取标题为什么返回的是URL？

A：如果加载的页面未设置title元素来指定标题，Web组件将基于URL生成标题并返回给应用程序。