1# 自定义页面请求响应
2
3
4Web组件支持在应用拦截到页面请求后自定义响应请求能力。开发者通过[onInterceptRequest()](../reference/apis-arkweb/ts-basic-components-web.md#oninterceptrequest9)接口来实现自定义资源请求响应 。自定义请求能力可以用于开发者自定义Web页面响应、自定义文件资源响应等场景。
5
6
7Web网页上发起资源加载请求，应用层收到资源请求消息。应用层构造本地资源响应消息发送给Web内核。Web内核解析应用层响应信息，根据此响应信息进行页面资源加载。
8
9
10在下面的示例中，Web组件通过拦截页面请求“https://www.example.com/test.html”， 在应用侧代码构建响应资源，实现自定义页面响应场景。
11
12
13- 前端页面index.html代码。
14
15  ```html
16  <!DOCTYPE html>
17  <html>
18  <head>
19      <meta charset="utf-8">
20  </head>
21  <body>
22  <!-- 页面资源请求 -->
23  <a href="https://www.example.com/test.html">intercept test!</a>
24  </body>
25  </html>
26  ```
27
28- 应用侧代码。
29
30  ```ts
31  // xxx.ets
32  import { webview } from '@kit.ArkWeb';
33
34  @Entry
35  @Component
36  struct WebComponent {
37    controller: webview.WebviewController = new webview.WebviewController();
38    responseResource: WebResourceResponse = new WebResourceResponse();
39    // 开发者自定义响应数据
40    @State webData: string = '<!DOCTYPE html>\n' +
41      '<html>\n' +
42      '<head>\n' +
43      '<title>intercept test</title>\n' +
44      '</head>\n' +
45      '<body>\n' +
46      '<h1>intercept ok</h1>\n' +
47      '</body>\n' +
48      '</html>'
49
50    build() {
51      Column() {
52        Web({ src: $rawfile('index.html'), controller: this.controller })
53          .onInterceptRequest((event) => {
54            if (event) {
55              console.info('url:' + event.request.getRequestUrl());
56              // 拦截页面请求
57              if (event.request.getRequestUrl() !== 'https://www.example.com/test.html') {
58                return null;
59              }
60            }
61            // 构造响应数据
62            this.responseResource.setResponseData(this.webData);
63            this.responseResource.setResponseEncoding('utf-8');
64            this.responseResource.setResponseMimeType('text/html');
65            this.responseResource.setResponseCode(200);
66            this.responseResource.setReasonMessage('OK');
67            return this.responseResource;
68          })
69      }
70    }
71  }
72  ```
73
74为自定义的JavaScript请求响应生成 CodeCache：自定义请求响应的资源类型如果是JavaScript脚本，可以在响应头中添加“ResponseDataID”字段，Web内核读取到该字段后会在为该JS资源生成CodeCache，加速JS执行，并且ResponseData如果有更新时必须更新该字段。不添加“ResponseDataID”字段的情况下默认不生成CodeCache。
75
76在下面的示例中，Web组件通过拦截页面请求“https://www.example.com/test.js”， 应用侧代码构建响应资源，在响应头中添加“ResponseDataID”字段，开启生成CodeCache的功能。
77
78- 前端页面index.html代码。
79
80  ```html
81  <!DOCTYPE html>
82  <html>
83  <head>
84      <meta charset="utf-8">
85  </head>
86  <body>
87
88  <div id="div-1">this is a test div</div>
89  <div id="div-2">this is a test div</div>
90  <div id="div-3">this is a test div</div>
91  <div id="div-4">this is a test div</div>
92  <div id="div-5">this is a test div</div>
93  <div id="div-6">this is a test div</div>
94  <div id="div-7">this is a test div</div>
95  <div id="div-8">this is a test div</div>
96  <div id="div-9">this is a test div</div>
97  <div id="div-10">this is a test div</div>
98  <div id="div-11">this is a test div</div>
99
100  <script src="https://www.example.com/test.js"></script>
101  </body>
102  </html>
103  ```
104
105- 应用侧代码。
106
107  ```ts
108  // xxx.ets
109  import { webview } from '@kit.ArkWeb';
110
111  @Entry
112  @Component
113  struct WebComponent {
114    controller: webview.WebviewController = new webview.WebviewController();
115    responseResource: WebResourceResponse = new WebResourceResponse();
116    // 开发者自定义响应数据（响应数据长度需大于等于1024才会生成codecache）
117    @State jsData: string = 'let text_msg = "the modified content:version 0000000000001";\n' +
118      'let element1 = window.document.getElementById("div-1");\n' +
119      'let element2 = window.document.getElementById("div-2");\n' +
120      'let element3 = window.document.getElementById("div-3");\n' +
121      'let element4 = window.document.getElementById("div-4");\n' +
122      'let element5 = window.document.getElementById("div-5");\n' +
123      'let element6 = window.document.getElementById("div-6");\n' +
124      'let element7 = window.document.getElementById("div-7");\n' +
125      'let element8 = window.document.getElementById("div-8");\n' +
126      'let element9 = window.document.getElementById("div-9");\n' +
127      'let element10 = window.document.getElementById("div-10");\n' +
128      'let element11 = window.document.getElementById("div-11");\n' +
129      'element1.innerHTML = text_msg;\n' +
130      'element2.innerHTML = text_msg;\n' +
131      'element3.innerHTML = text_msg;\n' +
132      'element4.innerHTML = text_msg;\n' +
133      'element5.innerHTML = text_msg;\n' +
134      'element6.innerHTML = text_msg;\n' +
135      'element7.innerHTML = text_msg;\n' +
136      'element8.innerHTML = text_msg;\n' +
137      'element9.innerHTML = text_msg;\n' +
138      'element10.innerHTML = text_msg;\n' +
139      'element11.innerHTML = text_msg;\n';
140
141    build() {
142      Column() {
143        Web({ src: $rawfile('index.html'), controller: this.controller })
144          .onInterceptRequest((event) => {
145            // 拦截页面请求
146            if (event?.request.getRequestUrl() == 'https://www.example.com/test.js') {
147              // 构造响应数据
148              this.responseResource.setResponseHeader([
149                {
150                  // 格式：不超过13位纯数字。js识别码，Js有更新时必须更新该字段
151                  headerKey: "ResponseDataID",
152                  headerValue: "0000000000001"
153                }]);
154              this.responseResource.setResponseData(this.jsData);
155              this.responseResource.setResponseEncoding('utf-8');
156              this.responseResource.setResponseMimeType('application/javascript');
157              this.responseResource.setResponseCode(200);
158              this.responseResource.setReasonMessage('OK');
159              return this.responseResource;
160            }
161            return null;
162          })
163      }
164    }
165  }
166  ```
167