Web组件拦截页面请求响应

在联系用web去加载js发出的请求时,被web容器拦截了,如图:

Web组件拦截页面请求响应-鸿蒙开发者社区

进而想更深入去了解Web组件支持在应用拦截到页面请求后自定义响应请求能力。

HarmonyOS
2024-05-26 17:32:39
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
honestForGirl

使用的核心API

核心代码解释

Web网页上发起资源加载请求,应用层收到资源请求消息。应用层构造本地资源响应消息发送给Web内核。

当Web组件加载url之前触发该回调,用于拦截url并返回响应数据。

import web_webview from '@ohos.web.webview' 
 
@Entry 
@Component 
struct WebComponent { 
  controller: web_webview.WebviewController = new web_webview.WebviewController() 
 
  build() { 
    Column() { 
      Web({ src: 'www.baidu.com', controller: this.controller }) 
        .onLoadIntercept((event) => { 
          console.log('url:' + event.data.getRequestUrl()) 
          console.log('isMainFrame:' + event.data.isMainFrame()) 
          console.log('isRedirect:' + event.data.isRedirect()) 
          console.log('isRequestGesture:' + event.data.isRequestGesture()) 
          return true 
        }) 
    } 
  } 
}

Web内核解析应用层响应信息,根据此响应信息进行页面资源加载。当Web组件加载url之前触发该回调,用于拦截url并返回响应数据。

@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 ok</h1>\n'+ 
    '</body>\n'+ 
    '</html>' 
  build() { 
    Column() { 
      Web({ src: $rawfile('Test1108.html'), controller: this.controller }) 
        //当Web组件加载url之前触发该回调,用于拦截url并返回响应数据 
        .onInterceptRequest((event) => { 
          if (event) { 
            console.info('url:' + event.request.getRequestUrl()); 
            // 拦截页面请求 
            if (event.request.getRequestUrl() !== 'https://www.intercept.com/test.html') { 
              return this.responseResource; 
            } 
          } 
          // 构造响应数据 
          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; 
        }) 
    } 
  } 
}

实现效果

分享
微博
QQ
微信
回复
2024-05-27 22:12:45
相关问题
可以脱离页面创建web组件,指的是?
364浏览 • 1回复 待解决
Web拦截不到vue的router跳转
511浏览 • 0回复 待解决
应用中http请求响应2300023
968浏览 • 1回复 待解决
webview如何实现网络请求拦截功能
717浏览 • 1回复 待解决
有谁知道web拦截如何处理文件
436浏览 • 1回复 待解决
有谁知道如何拦截页面返回
181浏览 • 3回复 待解决
web组件registerJavaScriptProxy的问题
568浏览 • 0回复 待解决