Web组件拦截页面请求响应

在联系用web去加载js发出的请求时，被web容器拦截了，如图：

Web组件拦截页面请求响应-鸿蒙开发者社区

进而想更深入去了解Web组件支持在应用拦截到页面请求后自定义响应请求能力。

HarmonyOS

一意孤行的

2024-05-26 17:32:39

798浏览

回答 1

按赞同

按时间

十根玉米

使用的核心API

onInterceptRequest()
onLoadIntercept
setResponseData

核心代码解释

Web网页上发起资源加载请求，应用层收到资源请求消息。应用层构造本地资源响应消息发送给Web内核。

当Web组件加载url之前触发该回调，用于拦截url并返回响应数据。

import web_webview from '@ohos.web.webview' 
 
@Entry 
@Component 
struct WebComponent { 
  controller: web_webview.WebviewController = new web_webview.WebviewController() 
 
  build() { 
    Column() { 
      Web({ src: 'www.baidu.com', controller: this.controller }) 
        .onLoadIntercept((event) => { 
          console.log('url:' + event.data.getRequestUrl()) 
          console.log('isMainFrame:' + event.data.isMainFrame()) 
          console.log('isRedirect:' + event.data.isRedirect()) 
          console.log('isRequestGesture:' + event.data.isRequestGesture()) 
          return true 
        }) 
    } 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

Web内核解析应用层响应信息，根据此响应信息进行页面资源加载。当Web组件加载url之前触发该回调，用于拦截url并返回响应数据。

@Entry 
@Component 
struct WebComponent { 
  controller: web_webview.WebviewController = new web_webview.WebviewController() 
  responseResource: WebResourceResponse = new WebResourceResponse() 
  // 自定义响应数据 
  @State webData: string = '<!DOCTYPE html>\n' + 
    '<html>\n'+ 
    '<head>\n'+ 
    '<title>intercept test</title>\n'+ 
    '</head>\n'+ 
    '<body>\n'+ 
    '<h1>intercept ok</h1>\n'+ 
    '</body>\n'+ 
    '</html>' 
  build() { 
    Column() { 
      Web({ src: $rawfile('Test1108.html'), controller: this.controller }) 
        //当Web组件加载url之前触发该回调，用于拦截url并返回响应数据 
        .onInterceptRequest((event) => { 
          if (event) { 
            console.info('url:' + event.request.getRequestUrl()); 
            // 拦截页面请求 
            if (event.request.getRequestUrl() !== 'https://www.intercept.com/test.html') { 
              return this.responseResource; 
            } 
          } 
          // 构造响应数据 
          this.responseResource.setResponseData(this.webData); 
          this.responseResource.setResponseEncoding('utf-8'); 
          this.responseResource.setResponseMimeType('text/html'); 
          this.responseResource.setResponseCode(200); 
          this.responseResource.setReasonMessage('OK'); 
          return this.responseResource; 
        }) 
    } 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.

实现效果

2024-05-27 22:12:45

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

Web组件拦截页面请求响应

订阅鸿蒙技术特刊，精选内容抢先看