HarmonyOS鸿蒙Next中WebView跳转后白屏问题

HarmonyOS鸿蒙Next中WebView跳转后白屏问题

Web({ src: ‘xxx’, controller: this.controller }) .width(‘100%’) .layoutWeight(1) .margin({ bottom: ‘30vp’ })

跳转后变白了，应该是链接被重定向了，怎么禁止重定向

3 回复

可以使用： onLoadIntercept ： 当Web组件加载url之前触发该回调，用于判断是否阻止此次访问。默认允许加载。

参考链接： https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#onloadintercept10

可以参考如下demo:

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({
        src: 'https://www.iesdouyin.com/share/video/7098224362855124254/?region=CN&mid=7098224461102844703&u_code=0&titleType=title&did=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&iid=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&with_sec_did=1',
        controller: this.controller
      })
      .width('100%')
      .layoutWeight(1)
      .margin({ bottom: '30vp' })
      .onLoadIntercept((event) => {
        if(event.data.getRequestUrl() === 'https://www.iesdouyin.com/share/video/7098224362855124254/?region=CN&mid=7098224461102844703&u_code=0&titleType=title&did=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&iid=MS4wLjABAAAANwkJuWIRFOzg5uCpDRpMj4OX-QryoDgn-yYlXQnRwQQ&with_sec_did=1'){
          return false;
        } else{
          return true
        }
      })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中WebView跳转后白屏问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，WebView跳转后出现白屏问题，可能由以下原因导致：

  1. 网络问题：跳转的网页无法加载，检查网络连接和网页URL是否正确。
  2. 渲染问题：WebView组件在渲染页面时出现问题，确保系统版本和WebView组件版本兼容。
  3. 内存不足：系统内存不足导致WebView无法正常加载页面，检查应用内存使用情况。
  4. 页面加载超时：页面加载时间过长导致白屏，调整WebView的加载超时设置。
  5. 跨域问题：跳转的页面涉及跨域请求，确保跨域请求被正确处理。
  6. JavaScript错误：页面中的JavaScript代码出错，检查控制台日志以定位问题。
  7. 缓存问题：WebView缓存导致页面无法正常加载，尝试清除缓存后重新加载。

解决方法：检查网络、确保URL正确、更新系统、调整超时设置、处理跨域请求、修复JavaScript错误、清除缓存。

如需进一步调试，可参考HarmonyOS官方文档。

在HarmonyOS鸿蒙Next中，WebView跳转后出现白屏问题，通常是由于页面加载失败或资源未正确加载。建议检查以下几点：

  1. 确保网络连接正常；
  2. 检查URL地址是否正确；
  3. 确认目标页面是否支持移动端访问；
  4. 查看WebView设置，如是否启用了JavaScript或缓存；
  5. 调试模式下检查控制台日志，定位具体错误。

若问题持续，考虑使用系统浏览器进行跳转测试。

回到顶部