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