[文章]鸿蒙原生应用元服务开发WEB-自定义页面请求响应

阅读量0
0
0

Web组件支持在应用拦截到页面请求后自定义响应请求能力。开发者通过onInterceptRequest()接口来实现自定义资源请求响应。自定义请求能力可以用于开发者自定义Web页面响应、自定义文件资源响应等场景。

Web网页上发起资源加载请求,应用层收到资源请求消息。应用层构造本地资源响应消息发送给Web内核。Web内核解析应用层响应信息,根据此响应信息进行页面资源加载。

在下面的示例中,Web组件通过拦截页面请求“https://www.example.com/test.html”,在应用侧代码构建响应资源,实现自定义页面响应场景。

前端页面index.html代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>example</title>

</head>

<body>

<!-- 页面资源请求 -->

<a href="https://www.example.com/test.html">intercept test!</a>

</body>

</html>

· 应用侧代码

// xxx.ets

import web_webview from '@ohos.web.webview'

 

@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 test</h1>\\\\n"+

  "</body>\\\\n"+

  "</html>"

  build() {

    Column() {

      Web({ src: $rawfile('index.html'), controller: this.controller })

        .onInterceptRequest((event?: Record<string, WebResourceRequest>): WebResourceResponse => {

          if (!event) {

            return new WebResourceResponse();

          }

          let mRequest: WebResourceRequest = event.request as WebResourceRequest;

          console.info('TAGLee: url:'+ mRequest.getRequestUrl());

          //拦截页面请求,如果加载的url判断与目标url一致则返回自定义加载结果webdata

          if(mRequest.getRequestUrl() === 'https://www.example.com/test.html'){

            // 构造响应数据

            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;

          }

          return;

        })

    }

  }

}

本文参考引用HarmonyOS官方开发文档,基于API9。

回帖

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
链接复制成功,分享给好友