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

#### 问题现象

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

#### 背景知识

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

#### 解决方案

1.  可以通过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%')
      }
    }
    ```
    
2.  在js中通过getElementById获取指定ID的标签，并修改其文本内容。
    
    index.js：
    
    ```
    let spanLabels = document.getElementById('mySpan');
    console.info(`mySpan:${spanLabels.innerHTML}`)
    spanLabels.innerHTML = "修改后的文本"
    ```
    
3.  加载的本地页面。
    
    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，包括字符串、数组类型等。