目录

Web组件加载链接，如何修改链接网页中的文本

问题现象

使用Web组件加载第三方的网页时，需要修改网页中的文本信息，如何实现？

背景知识

在H5（HTML5）中，可以使用getElementById获取到指定ID的标签：
- 根据ID获取指定的Span标签：
```
const spanElement = document.getElementById('mySpan');
```
- 也可以通过getElementsByTagName获取到指定名称标签的集合：
```
const spanElements = document.getElementsByTagName('span');
```
runJavaScriptExt：WebView提供了runJavaScriptExt实现异步执行JavaScript脚本，并通过回调方式返回脚本执行的结果。

解决方案

可以通过runJavaScriptExt注入脚本实现修改三方网页中文本。

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct Index {
  private controller: webview.WebviewController = new webview.WebviewController();
  private context: Context = this.getUIContext().getHostContext() as Context;

  initJavaScrip() {
    // 注入本地的js脚本
    this.context.resourceManager.getRawFileContent('index.js')
      .then((value: ESObject) => {
        // 获取js脚本的ArrayBuffer数据
        let rawfile: ArrayBuffer = value.buffer;
        console.info('开始注入脚本');
        this.controller.runJavaScriptExt(rawfile).then(() => {
          console.info('开始注入脚本成功');
        }).catch(() => {
          console.info('开始注入脚本失败');
        });
      });
  }

  build() {
    RelativeContainer() {
      Web({
        src: $rawfile('span.html'),
        controller: this.controller
      })
        .onPageEnd(() => {
          setTimeout(() => {
            this.initJavaScrip();
          }, 3000);
        })
        .fileAccess(false)
        .geolocationAccess(false)
        .domStorageAccess(true)
    }
    .height('100%')
    .width('100%')
  }
}

在js中通过getElementById获取指定ID的标签，并修改其文本内容。

index.js：

let spanLabels = document.getElementById('mySpan');
console.info(`mySpan:${spanLabels.innerHTML}`)
spanLabels.innerHTML = "修改后的文本"

加载的本地页面。

span.html：

<!DOCTYPE html>
<html>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<h1 id="example">示例文本</h1>
<span id="mySpan">这是默认文本</span>
</body>
</html>

常见FAQ

Q：runJavaScript()和runJavaScriptExt()有什么区别？

A：runJavaScript()和runJavaScriptExt()的区别主要体现在参数和返回值的类型上。runJavaScript()仅支持string类型参数，而runJavaScriptExt()支持string和ArrayBuffer类型参数；runJavaScript()返回脚本执行的结果只能是string，而runJavaScriptExt()可以返回的类型支持JsMessageType，包括字符串、数组类型等。