harmony 鸿蒙Customizing Page Request Responses

  • 2023-06-24
  • 浏览 (444)

Customizing Page Request Responses

The Web component supports customization of the response to intercepted page requests. You can call onInterceptRequest() to customize web page responses, file resource responses, etc.

When a resource loading request is initiated on a web page, the application layer will receive the request. The application layer then constructs a local resource response and sends it to the web kernel. On receiving the response, the web kernel parses the response and loads page resources accordingly.

In the following example, the Web component intercepts the web page request https://www.intercept.com/test.html and constructs a custom response in the application code.

  • Code of the example.html page:
  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <title>example</title>
  </head>
  <body>
  <!-- Page resource request ->
  <a href="https://www.intercept.com/test.html">intercept test!</a>
  </body>
  </html>
  • Application code:
  // xxx.ets
  import web_webview from '@ohos.web.webview'

  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    responseweb: WebResourceResponse = new WebResourceResponse()
    heads:Header[] = new Array()
    @State webdata: string = "<!DOCTYPE html>\n" +
    "<html>\n"+
    "<head>\n"+
    "<title>intercept test</title>\n"+
    "</head>\n"+
    "<body>\n"+
    "<h1>intercept test</h1>\n"+
    "</body>\n"+
    "</html>"
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .onInterceptRequest((event) => {
            if (event) {
              console.log('url:' + event.request.getRequestUrl())
            }
            let head1:Header = {
              headerKey:"Connection",
              headerValue:"keep-alive"
            }
            let head2:Header = {
              headerKey:"Cache-Control",
              headerValue:"no-cache"
            }
            let length = this.heads.push(head1)
            length = this.heads.push(head2)
            this.responseweb.setResponseHeader(this.heads)
            this.responseweb.setResponseData(this.webdata)
            this.responseweb.setResponseEncoding('utf-8')
            this.responseweb.setResponseMimeType('text/html')
            this.responseweb.setResponseCode(200)
            this.responseweb.setReasonMessage('OK')
            return this.responseweb
          })
      }
    }
  }

你可能感兴趣的鸿蒙文章

harmony 鸿蒙Web

harmony 鸿蒙Establishing a Data Channel Between the Application and the Frontend Page

harmony 鸿蒙Web Component Overview

harmony 鸿蒙Managing Cookies and Data Storage

harmony 鸿蒙Debugging Frontend Pages by Using DevTools

harmony 鸿蒙Uploading Files

harmony 鸿蒙Managing Location Permissions

harmony 鸿蒙Invoking Frontend Page Functions on the Application

harmony 鸿蒙Invoking Application Functions on the Frontend Page

harmony 鸿蒙Opening Pages in a New Window

0  赞