问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
HarmonyOS助手
    1574796

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

    HarmonyOSharmonyosharmonyos-next
    阅读 1.1k
    avatarAI BotBETA

    在Web组件中，判断一个网址是否加载成功通常涉及到监听某些特定的事件或使用某些API。下面是一些常见的方法：

    1. 监听load事件：
      对于<iframe>、<img>、<script>等标签，你可以监听load事件。当资源成功加载时，该事件会被触发。

      let iframe = document.querySelector('iframe');
iframe.addEventListener('load', function() {
    console.log('网址加载成功');
});

    2. 检查readyState属性：
      对于<iframe>，你可以检查其readyState属性来判断是否加载完成。当readyState为complete时，意味着iframe的内容已经加载完毕。

      let iframe = document.querySelector('iframe');
if (iframe.readyState === 'complete') {
    console.log('iframe加载成功');
}

    3. 使用fetch API:
      如果你想判断一个网络请求的网址是否加载成功，可以使用fetch API，它返回一个Promise对象，当请求成功完成时，你可以通过.then()方法处理响应。

      fetch('https://example.com')
  .then(response => {
      if (!response.ok) {
          throw new Error('网络响应不是ok');
      }
      return response.text();
  })
  .then(data => {
      console.log('网址加载成功，数据是：', data);
  })
  .catch(error => {
      console.error('网址加载失败:', error);
  });

    4. 监听XMLHttpRequest的readystatechange事件:
      对于使用XMLHttpRequest的老旧网络请求，你可以监听readystatechange事件，并检查readyState属性是否等于4（表示请求已完成）以及status属性是否等于200（表示成功的HTTP响应）。

      let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log('网址加载成功');
        } else {
            console.error('网址加载失败，状态码：', xhr.status);
        }
    }
};
xhr.send();

    5. 使用PerformanceObserver:
      对于更高级的用法，可以使用PerformanceObserver来观察与资源加载相关的性能条目。

      new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        if (entry.name === 'mark' && entry.entryType === 'mark') {
            console.log('网址加载成功');
        }
    }
}).observe({entryTypes: ['mark']});

// 在资源加载完成时手动添加标记
window.addEventListener('load', () => {
    performance.mark('mark');
});

    请注意，根据具体情况和你想要监测的资源的类型（如HTML、CSS、JavaScript、图片等），可能需要采用不同的方法。同时，处理跨域资源时可能会遇到一些限制，因为浏览器的同源策略可能会阻止你访问某些资源的状态。

    2 个回答
    得票最新
    头像
    HarmonyOS助手
      1574796

      方案一：在设备无网络时，网页加载会发生错误，可以触发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); 
            } 
          } 
        }) 
    } 
  } 
}
      头像
      查拉图斯特拉说
        3811115

        Web组件判断网址是否加载成功有几种方式：

        1. HTTP状态码：看状态码，2开头表示成功，4或5开头表示错误。
        2. 加载事件：利用加载事件，如load事件，判断是否成功加载。
        3. 超时处理：设定超时时间，在规定时间内未成功加载则判断失败。
        4. 错误处理：捕获错误事件，如error事件，判断是否成功加载。
        本文参与了思否 HarmonyOS 技术问答马拉松，欢迎正在阅读的你也加入。
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题