Web组件如何判断网址是否加载成功

HarmonyOS

coolhead2000

2024-03-17 17:33:32

浏览

回答 1

待解决

回答 1

按赞同

按时间

失望的满天星

方案一：在设备无网络时，网页加载会发生错误，可以触发Web组件的onErrorReceive回调函数。
方案二：在网页加载资源遇到HTTP错误（响应码>=400）时，可以触发Web组件的onHttpErrorReceive回调函数。

开发者可以根据不同的场景在对应的回调函数中进行相应的处理。

onErrorReceive：

// xxx.ets 
import { webview } from '@kit.ArkWeb'; 
 
@Entry 
@Component 
struct WebComponent { 
  controller: webview.WebviewController = new webview.WebviewController(); 
 
  build() { 
    Column() { 
      Web({ src: 'www.baidu.com', controller: this.controller }) 
        .onErrorReceive((event) => { 
          if (event) { 
            console.log('getErrorInfo:' + event.error.getErrorInfo()); 
            console.log('getErrorCode:' + event.error.getErrorCode()); 
            console.log('url:' + event.request.getRequestUrl()); 
            console.log('isMainFrame:' + event.request.isMainFrame()); 
            console.log('isRedirect:' + event.request.isRedirect()); 
            console.log('isRequestGesture:' + event.request.isRequestGesture()); 
            console.log('getRequestHeader_headerKey:' + event.request.getRequestHeader().toString()); 
            let result = event.request.getRequestHeader(); 
            console.log('The request header result size is ' + result.length); 
            for (let i of result) { 
              console.log('The request header key is : ' + i.headerKey + ', value is : ' + i.headerValue); 
            } 
          } 
        }) 
    } 
  } 
}

onHttpErrorReceive：

// xxx.ets 
import { webview } from '@kit.ArkWeb'; 
 
@Entry 
@Component 
struct WebComponent { 
  controller: webview.WebviewController = new webview.WebviewController(); 
 
  build() { 
    Column() { 
      Web({ src: 'www.example.com', controller: this.controller }) 
        .onHttpErrorReceive((event) => { 
          if (event) { 
            console.log('url:' + event.request.getRequestUrl()); 
            console.log('isMainFrame:' + event.request.isMainFrame()); 
            console.log('isRedirect:' + event.request.isRedirect()); 
            console.log('isRequestGesture:' + event.request.isRequestGesture()); 
            console.log('getResponseData:' + event.response.getResponseData()); 
            console.log('getResponseEncoding:' + event.response.getResponseEncoding()); 
            console.log('getResponseMimeType:' + event.response.getResponseMimeType()); 
            console.log('getResponseCode:' + event.response.getResponseCode()); 
            console.log('getReasonMessage:' + event.response.getReasonMessage()); 
            let result = event.request.getRequestHeader(); 
            console.log('The request header result size is ' + result.length); 
            for (let i of result) { 
              console.log('The request header key is : ' + i.headerKey + ' , value is : ' + i.headerValue); 
            } 
            let resph = event.response.getResponseHeader(); 
            console.log('The response header result size is ' + resph.length); 
            for (let i of resph) { 
              console.log('The response header key is : ' + i.headerKey + ' , value is : ' + i.headerValue); 
            } 
          } 
        }) 
    } 
  } 
}

2024-03-18 21:11:05

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

Web组件如何判断网址是否加载成功

订阅鸿蒙技术特刊，精选内容抢先看