自定義頁面請求響應

2024-02-16 13:41 更新

Web組件支持在應用攔截到頁面請求后自定義響應請求能力。開發(fā)者通過onInterceptRequest()接口來實現(xiàn)自定義資源請求響應 。自定義請求能力可以用于開發(fā)者自定義Web頁面響應、自定義文件資源響應等場景。

Web網頁上發(fā)起資源加載請求，應用層收到資源請求消息。應用層構造本地資源響應消息發(fā)送給Web內核。Web內核解析應用層響應信息，根據此響應信息進行頁面資源加載。

在下面的示例中，Web組件通過攔截頁面請求“https://www.example.com/test.html”，在應用側代碼構建響應資源，實現(xiàn)自定義頁面響應場景。

  • 前端頁面index.html代碼。
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="utf-8">
    5.     <title>example</title>
    6. </head>
    7. <body>
    8. <!-- 頁面資源請求 -->
    9. <a href="https://www.example.com/test.html">intercept test!</a>
    10. </body>
    11. </html>
  • 應用側代碼。
    1. // xxx.ets
    2. import web_webview from '@ohos.web.webview'
    3. 

    4. @Entry
    5. @Component
    6. struct WebComponent {
    7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
    8.   responseResource: WebResourceResponse = new WebResourceResponse()
    9.   // 開發(fā)者自定義響應數(shù)據
    10.   @State webdata: string = "<!DOCTYPE html>\n" +
    11.   "<html>\n"+
    12.   "<head>\n"+
    13.   "<title>intercept test</title>\n"+
    14.   "</head>\n"+
    15.   "<body>\n"+
    16.   "<h1>intercept test</h1>\n"+
    17.   "</body>\n"+
    18.   "</html>"
    19.   build() {
    20.     Column() {
    21.       Web({ src: $rawfile('index.html'), controller: this.controller })
    22.         .onInterceptRequest((event?: Record<string, WebResourceRequest>): WebResourceResponse => {
    23.           if (!event) {
    24.             return new WebResourceResponse();
    25.           }
    26.           let mRequest: WebResourceRequest = event.request as WebResourceRequest;
    27.           console.info('TAGLee: url:'+ mRequest.getRequestUrl());
    28.           //攔截頁面請求，如果加載的url判斷與目標url一致則返回自定義加載結果webdata
    29.           if(mRequest.getRequestUrl() === 'https://www.example.com/test.html'){
    30.             // 構造響應數(shù)據
    31.             this.responseResource.setResponseData(this.webdata);
    32.             this.responseResource.setResponseEncoding('utf-8');
    33.             this.responseResource.setResponseMimeType('text/html');
    34.             this.responseResource.setResponseCode(200);
    35.             this.responseResource.setReasonMessage('OK');
    36.             return this.responseResource;
    37.           }
    38.           return;
    39.         })
    40.     }
    41.   }
    42. }
以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號