HarmonyOS 鸿蒙Next Webview组件中如何在加载h5页面的过程中拦截并替换某一个特定的js文件

发布于 1周前 作者 zlyuanteng 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Webview组件中如何在加载h5页面的过程中拦截并替换某一个特定的js文件 目前项目上有一个需求，需要在加载web页面的时候，拦截某一个特定的js加载，替换为本地的js文件，请问如何使用webview组件实现这个功能

该需求的要求是在加载过程中就完成js文件的替换，不能在加载页面完成后再替换

请问Webview组件是否有实现该功能的方法

2 回复

在加载Web页面的时候，如果需要拦截某一个特定的js加载并替换为本地的js文件，可以使用Web组件提供的onLoadIntercept方法。通过这个方法，您可以自定义资源请求响应，包括拦截页面Web的src链接后返回自定义HTML文件。在设置拦截器时，需要同时设置setResponseEncoding、setResponseMimeType、setResponseHeader等参数来确保内核能够识别到这是个HTML文件。

解决Web组件本地资源跨域问题：

// main/ets/pages/index.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  // 构造域名和本地文件的映射表
  schemeMap = new Map([
    ["https://www.example.com/index.html", "index.html"],
    ["https://www.example.com/js/script.js", "js/script.js"]
  ])
  // 构造本地文件和构造返回的格式mimeType
  mimeTypeMap = new Map([
    ["index.html", 'text/html'],
    ["js/script.js", "text/javascript"]
  ])

  build() {
    Row() {
      Column() {
        // 针对本地index.html,使用http或者https协议代替file协议或者resource协议，并且构造一个属于自己的域名。
        // 本例中构造www.example.com为例。
        Web({ src: "https://www.example.com/index.html", controller: this.webviewController })
          .javaScriptAccess(true)
          .fileAccess(true)
          .domStorageAccess(true)
          .geolocationAccess(true)
          .width("100%")
          .height("100%")
          .onInterceptRequest((event) => {
            if (!event) {
              return;
            }
            // 此处匹配自己想要加载的本地离线资源，进行资源拦截替换，绕过跨域
            if (this.schemeMap.has(event.request.getRequestUrl())) {
              let rawfileName: string = this.schemeMap.get(event.request.getRequestUrl())!;
              let mimeType = this.mimeTypeMap.get(rawfileName);
              if (typeof mimeType === 'string') {
                let response = new WebResourceResponse();
                // 构造响应数据，如果本地文件在rawfile下，可以通过如下方式设置
                response.setResponseData($rawfile(rawfileName));
                response.setResponseEncoding('utf-8');
                response.setResponseMimeType(mimeType);
                response.setResponseCode(200);
                response.setReasonMessage('OK');
                response.setResponseIsReady(true);
                return response;
              }
            }
            return null;
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

<!-- main/resources/rawfile/index.html -->
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<script crossorigin src="./js/script.js"></script>
</body>
</html>

// main/resources/rawfile/js/script.js
const body = document.body;
const element = document.createElement('div');
element.textContent = 'success';
body.appendChild(element);

更多关于HarmonyOS 鸿蒙Next Webview组件中如何在加载h5页面的过程中拦截并替换某一个特定的js文件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next Webview组件中，要在加载H5页面的过程中拦截并替换某一个特定的JS文件，可以通过以下方式实现：

  1. Webview拦截请求：首先，你需要通过Webview提供的接口来拦截页面中的所有资源请求。鸿蒙系统提供了相应的API来监听和拦截Webview中的网络请求。

  2. 判断并替换JS文件：在拦截到的请求中，检查请求的URL是否为你想要替换的JS文件的URL。如果匹配，则返回一个自定义的JS文件内容，而不是加载原始的文件。

  3. 返回自定义内容：对于匹配到的请求，你可以通过Webview的接口返回一个自定义的响应，这个响应中包含你希望加载的JS文件内容。

  4. 确保同步：在整个过程中，需要确保拦截、判断和返回内容的操作是同步进行的，以避免影响页面的正常加载。

示例代码（伪代码）：

webview.setWebViewClient(new WebViewClient() {
    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
        if (request.getUrl().toString().contains("target.js")) {
            // 读取或生成自定义的JS文件内容
            String customJsContent = readCustomJsFile();
            return new WebResourceResponse("text/javascript", "utf-8", new ByteArrayInputStream(customJsContent.getBytes()));
        }
        return super.shouldInterceptRequest(view, request);
    }
});

注意：上述代码为伪代码，具体实现需根据鸿蒙系统的API进行调整。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部