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

#### 问题现象

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

#### 背景知识

*   在H5（HTML5）中，可以使用getElementById获取到指定ID的标签：
    *   根据ID获取指定的Span标签：
        
        const spanElement \= document.getElementById('mySpan');
        
    *   也可以通过getElementsByTagName获取到指定名称标签的集合：
        
        const spanElements \= document.getElementsByTagName('span');
        
*   [runJavaScriptExt](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-webview-webviewcontroller#runjavascriptext10)：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()](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-webview-webviewcontroller#runjavascript)和runJavaScriptExt()的区别主要体现在参数和返回值的类型上。runJavaScript()仅支持string类型参数，而runJavaScriptExt()支持string和ArrayBuffer类型参数；runJavaScript()返回脚本执行的结果只能是string，而runJavaScriptExt()可以返回的类型支持[JsMessageType](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-webview-jsmessageext)，包括字符串、数组类型等。