HarmonyOS 鸿蒙Next中切换页面后，如何检索当前页面所有文本

HarmonyOS 鸿蒙Next中切换页面后，如何检索当前页面所有文本 客户公司 需要我们开发一个 用于视频通话，进行屏幕共享的功能模块
webview 建立视频 和 屏幕共享 在鸿蒙端我已经实现了。

现在需要 做一个 切换页面后 检索当前页面文本 用于判断是否是敏感信息，如果是敏感信息 就计算坐标大小，发给webview内进行打码 的功能

注：敏感信息不是出现在 webview 页面，是通过webview页面 建立屏幕共享，然后回退到 app操作，然后webview 我给他最小化到旁边了，这样能保持 屏幕共享状态， 然后 客户这时候是在 操作 鸿蒙app页面的，所以我需要的是 检索鸿蒙页面的元素

webview的H5页面 我用js可以检索

现在就是 返回 鸿蒙 页面的时候 鸿蒙页面上的 敏感信息我获取不到

使用场景是，鸿蒙页面 打开一个客服 这个客服是webview页面 可以建立视频通话和屏幕共享，建立成功后，客服引导客户回到鸿蒙APP 在这里可以 填写表单之类的，表单中的敏感信息 不能让客服看到 需要进行打码，

所以需要检索当前鸿蒙app 页面内的敏感信息安卓和ios 我是用当前元素查找到比如说 身份证、各种证号码、地址、电话 等等 业务相关，然后我检索当前页面所有的ui 找到这些敏感行进行打码

但是鸿蒙我没有找到有类似检索的方案，请问老师有什么办法么？

我先是用ocr的方式做了一个，这个的问题是 有点慢加上定位不是非常准确，所以我想咨询一下各位老师，
除了ocr方式，鸿蒙有没有别的办法 ，在切换页面时 ，获取当前页面元素的 文本 并 计算 位置 宽高

（由于客户无法配合我的需求 主动去标记他们做的业务页面 上面的敏感信息 ，所以就必须要用检索的方式，安卓端 和 IOS 都是这样实现的，
现在到鸿蒙端 我没找到怎么检索页面， 如果鸿蒙端必须要在业务页面标记能实现 请各位老师 教我一下，这样我也好和客户说 鸿蒙端目前只能主动标记敏感信息来实现）

以下是我目前的部分代码
EntryAbility.ets中 切换页面时触发ocr识别 这里我希望是改成 能触发页面检索：

// 注册监听，范围是uiContext内的page
observer.on('routerPageUpdate', this.context, (info: observer.RouterPageInfo) => {
  // 在任何页面状态变化时都触发检测
  if (info.state === observer.RouterPageState.ABOUT_TO_APPEAR ||
    info.state === observer.RouterPageState.ON_PAGE_SHOW) {

    const newPageUrl = info.name || info.path || 'unknown';

    if (newPageUrl !== this.currentPageUrl) {
      this.currentPageUrl = newPageUrl;
    }

    // 延迟检测，确保页面完全加载
    setTimeout(() => {
      // 检测当前页面的敏感信息并更新到SensitiveDetector
      this.detectCurrentPageSensitiveInfo();
      // 页面切换时强制更新
      this.screenShareManager.detectAndSendSensitiveRegions(true);
    }, 300);
  }
});

更多关于HarmonyOS 鸿蒙Next中切换页面后，如何检索当前页面所有文本的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

开发者您好：

       鸿蒙原生目前无其他方式可以识别到h5页面中元素的元素的文本并计算位置宽高，建议参考2楼说的注入JS的方式去标记。参考文档：属性-Web-ArkTS 组件-ArkWeb（方舟Web）-应用框架 - 华为HarmonyOS开发者

更多关于HarmonyOS 鸿蒙Next中切换页面后，如何检索当前页面所有文本的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


敏感信息不是出现在 webview 页面，是通过webview页面建立屏幕共享，然后回退到 app 操作，然后 webview 我给他最小化到旁边了，这样能保持屏幕共享状态，然后客户这时候是在操作鸿蒙 app 页面的，所以我需要的是检索鸿蒙页面的元素。

webview 的 H5 页面我用 js 可以检索。

现在就是返回鸿蒙页面的时候鸿蒙页面上的敏感信息我获取不到。

使用场景是，鸿蒙页面打开一个客服，这个客服是webview页面，可以建立视频通话和屏幕共享。建立成功后，客服引导客户回到鸿蒙APP，在这里可以填写表单之类的，表单中的敏感信息不能让客服看到，需要进行打码，所以需要检索当前鸿蒙app页面内的敏感信息。

安卓和iOS，我是用当前元素查找到比如说密码，然后我检索当前页面所有的UI，找到密码这一行进行打码。但是鸿蒙我没有找到有类似检索的方案，请问老师有什么办法么？

没看懂为啥要用到 OCR，你这敏感信息是出现在 webview 页面的吧，虽然客户无法配合你的需求主动去标记他们做的业务页面，那你注入 js 到 webview 页面做标识呢？

用 javaScriptOnDocumentEnd，将 JavaScript 脚本注入到 Web 组件中，当指定页面或者文档加载完成时，该脚本将在其来源与 scriptRules 匹配的任何页面中执行。

敏感信息不是出现在 webview 页面，是通过webview页面建立屏幕共享，然后回退到 app 操作，然后 webview 我给他最小化到旁边了，这样能保持屏幕共享状态，然后客户这时候是在操作鸿蒙 app 页面的，所以我需要的是检索鸿蒙页面的元素。

webview 的 H5 页面我用 js 可以检索。

现在就是返回鸿蒙页面的时候鸿蒙页面上的敏感信息我获取不到。

使用场景是，鸿蒙页面打开一个客服，这个客服是webview页面，可以建立视频通话和屏幕共享。建立成功后，客服引导客户回到鸿蒙APP，在这里可以填写表单之类的。表单中的敏感信息不能让客服看到，需要进行打码，所以需要检索当前鸿蒙app页面内的敏感信息。

安卓和iOS，我是用当前元素查找到比如说密码，然后我检索当前页面所有的UI，找到密码这一行进行打码。但是鸿蒙我没有找到有类似检索的方案，请问老师有什么办法么？

其实有个简单的，TextInput输入框设置Password密码输入模式就好了，

目前的Ocr识别还存在限制，楼主这种实时识别的可以参考一下其他SDK的实现方案

cke_1715.png

【参考文档】 业务介绍-通用文字识别-文本识别-HUAWEI HiAI Engine - 华为HarmonyOS开发者

请问 老师，除了Ocr 还有别的方式可以检索页面内容么？

在HarmonyOS Next中，可通过getUIContext()获取当前页面的UI上下文，使用findComponent()方法配合On('*')选择器检索所有文本组件。具体步骤：获取PageAbility的UI上下文，调用findComponent遍历组件树，筛选出Text或RichText组件，通过getText()方法提取文本内容。此方法适用于单页内动态文本检索。

在HarmonyOS Next中，可以通过UI组件树遍历来获取当前页面所有文本元素及其位置信息。以下是实现方案：

  1. 获取当前页面根节点：
let windowStage = window.getLastWindow(this.context);
let uiContext = windowStage.getMainWindowSync().getUIContext();
let rootNode = uiContext.getUINodeSync();
  1. 递归遍历UI树收集文本：
private collectTextElements(node: UINode): Array<TextInfo> {
  let textElements: Array<TextInfo> = [];
  
  if (node instanceof Text) {
    let rect = node.getRect();
    textElements.push({
      text: node.getText(),
      bounds: {
        left: rect.left,
        top: rect.top,
        right: rect.right,
        bottom: rect.bottom
      }
    });
  }
  
  // 遍历子节点
  let children = node.getChildren();
  for (let child of children) {
    textElements = textElements.concat(this.collectTextElements(child));
  }
  
  return textElements;
}
  1. 在页面切换时触发检测：
observer.on('routerPageUpdate', this.context, (info: observer.RouterPageInfo) => {
  if (info.state === observer.RouterPageState.ON_PAGE_SHOW) {
    setTimeout(() => {
      let textElements = this.collectTextElements(rootNode);
      this.processSensitiveInfo(textElements);
    }, 300);
  }
});
  1. 处理敏感信息并计算坐标：
private processSensitiveInfo(textElements: Array<TextInfo>) {
  textElements.forEach(element => {
    if (this.isSensitiveText(element.text)) {
      let region = {
        x: element.bounds.left,
        y: element.bounds.top,
        width: element.bounds.right - element.bounds.left,
        height: element.bounds.bottom - element.bounds.top
      };
      // 发送给WebView进行打码
      this.sendToWebView(region);
    }
  });
}

此方案通过直接访问UI组件树获取文本和位置信息，相比OCR方案更精确高效。需要注意在页面完全加载后执行检测，确保获取到完整的UI树结构。

回到顶部