HarmonyOS鸿蒙Next中getTitle()获取h5标题，获取的为啥事url

HarmonyOS鸿蒙Next中getTitle()获取h5标题，获取的为啥事url

.onTitleReceive(() => {
  
    this.text = this.controller.getTitle();
8 回复

1.在onTitleReceive这个回调里面可以直接获取到title，如果没有title是会直接返回url，判断是不是url楼主也可以通过回调获取：

cke_6220.png

cke_1395.png

2.参考代码：

// xxx.ets
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 })
        .onTitleReceive((event) => {
          if (event) {
            console.log('title:' + event.title);
            console.log('isRealTitle:' + event.isRealTitle);
          }
        })
    }
  }
}

3.参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-basic-components-web-events#ontitlereceive

更多关于HarmonyOS鸿蒙Next中getTitle()获取h5标题，获取的为啥事url的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


onTitleReceive 是有返回值的，可在返回值中进行取

getTitle() 方法可能直接关联当前页面的 URL 而非标题属性，需通过 onTitleReceive 事件回调的 event.title 获取标题

Web({ 
  src: 'www.example.com', 
  controller: this.controller 
})
.onTitleReceive((event) => {
  if (event) {
    // 直接通过 event.title 获取标题
    this.text = event.title;
  }
})

一版与事件监听方式或API调用方法有关。.onTitleReceive事件回调的参数未正确使用，导致未从事件对象中提取标题。还有WebController的getTitle()方法可能在某些场景下返回未定义值或URL

解决办法

通过.onTitleReceive事件的回调参数直接获取标题：

Web({ src: 'https://example.com', controller: this.controller })

  .onTitleReceive((event) => {

    if (event && event.title) {

      this.text = event.title; // 直接从event对象获取标题

      console.log('H5标题:', event.title);

    }

  })

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

原因分析

  1. getTitle()方法的行为：
    根据《arkts-apis-webview-WebviewController.md》文档，getTitle()方法用于获取当前网页的标题（返回类型为string）。正常情况下，它应返回网页的标题文本（即HTML中<title>标签的内容）。

    • 示例代码显示：getTitle()返回的是标题字符串（如console.log("title: " + title)）。
    • 文档中未明确说明getTitle()会返回URL；它应始终返回标题内容。

  2. onTitleReceive事件的行为：
    根据《arkts-basic-components-web-events.md》文档，onTitleReceive事件在页面document标题更改时触发。其回调参数OnTitleReceiveEvent包含：

    • title：document标题内容（字符串）。
    • isRealTitle（20+）：标题来源标识（true表示来自网页的<title>标签，false表示标题是基于URL自动生成的）。
    • 关键点：如果加载的页面未设置<title>标签（即网页未定义标题），ArkWeb会基于URL自动生成一个标题并返回。此时，event.title可能包含URL或基于URL生成的字符串。

  3. 您的代码问题：
    您在.onTitleReceive回调中调用this.controller.getTitle()，但未使用事件参数event。这可能导致：

    • getTitle()返回的是当前网页的标题，但如果标题尚未更新或网页未设置标题，它可能返回空字符串或旧值。
    • 如果网页未设置标题，ArkWeb自动基于URL生成标题，此时getTitle()可能返回URL相关的字符串（因为系统用URL作为标题）。

解决方案

  • 直接使用事件参数：在onTitleReceive回调中，应直接使用event.title获取实时标题信息，而不是调用getTitle()。同时，可以通过event.isRealTitle判断标题是否来自网页（true）或由URL生成（false）。
    修改代码示例：
.onTitleReceive((event) => {
    if (event) {
        this.text = event.title; // 直接使用事件中的标题
        console.log('title:' + event.title);
        console.log('isRealTitle:' + event.isRealTitle); // 检查标题来源
    }
})

这样能确保获取到最新的标题，并区分标题是否为自动生成。

  • 检查网页代码：确保加载的H5页面设置了正确的<title>标签（例如：<title>我的页面标题</title>），以避免ArkWeb自动生成基于URL的标题。

总结

  • getTitle()本身设计为返回网页标题，但如果网页未设置标题，系统可能将URL作为标题返回，导致您获取到URL。
  • 使用onTitleReceive事件的event.title和event.isRealTitle能更准确、实时地处理标题变化，并识别标题来源。

如果问题仍存在，请检查网页代码是否缺失标题设置，或提供更多上下文以便进一步分析。

在HarmonyOS鸿蒙Next中，getTitle()方法获取H5页面标题时返回URL，通常是因为页面尚未完全加载或标题未正确设置。鸿蒙的Web组件在页面加载过程中可能未及时更新标题信息，需确保在onPageEnd回调后调用该方法。检查页面是否包含动态修改标题的JavaScript代码，部分情况下可能异步操作导致标题未生效。

在HarmonyOS Next中，getTitle()返回URL而非页面标题，通常是因为Web页面未正确设置<title>标签或页面加载未完成时调用该方法。请检查以下可能原因：

  1. 页面标题未定义或动态加载，导致API回退到URL；
  2. 调用时机过早，需在页面onPageFinished事件后获取；
  3. Web组件兼容性问题，可尝试通过evaluateJavaScript直接执行document.title获取标题。

建议在回调中增加日志输出，确认页面加载状态及标题是否存在。

回到顶部