HarmonyOS Web加载网页白屏

在一个组件中请求网络获取到要加载的url,在当前Web中加载出现白屏。

@Component 
export default struct NewsList { 
  // @State newsUrl: string = CommonConstants.NEWS_DEFAULT_URL; 
  @State newsUrl: string = '' 
  webviewController: web_webview.WebviewController = new web_webview.WebviewController(); 
  @State mode: MixedMode = MixedMode.All 
  @State webLoadFinish: boolean = false //新闻列表是否加载完成 
 
  async aboutToAppear(): Promise<void> { 
    let res: Record<string, ESObject> = await getNewsUrl() 
    if (res.data) { 
      this.newsUrl = res.data; 
    } 
  } 
 
  build() { 
    Column() { 
      DDNavigationBarView({ 
        title: '新闻', 
        showBack: false 
      }) 
      Web({ src: this.newsUrl, controller: this.webviewController }) 
        .domStorageAccess(true) 
        .mixedMode(this.mode) 
        .onPageEnd(() => { 
          this.webLoadFinish = true 
        }) 
        .onLoadIntercept((event) => { 
          if (this.webLoadFinish) { 
            if (getPassPort()) { //用户是否登陆 
              let userId: string = getPassPort().user_id; 
              let action = 'yes' 
              let userIcon: string = getPassPort().user_img 
              let userName: string = getPassPort().user_nickname 
              //同步用户数据给新闻页面 
              this.webviewController.loadUrl(`javascript:xyAuth.appAuth("${action}","${userId}","${userIcon}","${userName}")`) 
            } else { //用户未登陆 
              console.log('没有用户数据') 
              let userId: string = ''; 
              let action = 'no' 
              let userIcon: string = '' 
              let userName: string = '' 
              //同步用户数据给新闻页面 
              this.webviewController.loadUrl(`javascript:xyAuth.appAuth("${action}","${userId}","${userIcon}","${userName}")`) 
            } 
            router.pushUrl({ 
              url: 'pages/modules/news/pages/NewsDetailPage', 
              params: { newsDetailsUrl: event.data.getRequestUrl() } 
            }) 
          } 
          return this.webLoadFinish 
        }) 
        .javaScriptAccess(true) 
        .width('100%') 
        .height('100%') 
    } 
    .backgroundColor(Color.White) 
  } 
}
HarmonyOS
2024-09-05 10:07:16
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

请尝试在异步获取newsUrl后,主动调用loadUrl加载,示例代码如下:

import web_webview from '@ohos.web.webview'; 
 
// 模拟异步请求,3s后返回一个URL 
async function getNewsUrl(): Promise<string> { 
  return new Promise((resolve) => { 
    setTimeout(() => { 
      resolve('https://test.example.com/') 
    }, 3000) 
  }) 
} 
@Entry 
@Component 
export default struct NewsList { 
  @State newsUrl: string = '' 
  webviewController: web_webview.WebviewController = new web_webview.WebviewController(); 
  @State mode: MixedMode = MixedMode.All 
  @State webLoadFinish: boolean = false //新闻列表是否加载完成 
  async aboutToAppear(): Promise<void> { 
    let res = await getNewsUrl() 
    this.newsUrl = res; 
    // 异步更新newsUrl,web组件不会主动重新加载,需要手动调用loadUrl 
    this.webviewController.loadUrl(this.newsUrl) 
  } 
  build() { 
    Column() { 
      Web({ src: this.newsUrl, controller: this.webviewController }) 
        .domStorageAccess(true) 
        .mixedMode(this.mode) 
        .onPageEnd(() => { 
        this.webLoadFinish = true 
      }) 
      .javaScriptAccess(true) 
        .width('100%') 
        .height('100%') 
    } 
    .backgroundColor(Color.White) 
 
  } 
}
分享
微博
QQ
微信
回复
2024-09-05 15:55:48
相关问题
使用Web组件加载网页,显示空白。
400浏览 • 1回复 待解决
Web加载网页后获取当前页面和url
1138浏览 • 1回复 待解决
HarmonyOS 如何实现加载网页的能力?
167浏览 • 1回复 待解决
关于 web 网页打开速度
207浏览 • 1回复 待解决
HarmonyOS web加载失败
175浏览 • 1回复 待解决
如何解决webview离线加载白屏问题
1158浏览 • 1回复 待解决
ListContainer加载大量数据白屏并且卡UI
5444浏览 • 1回复 待解决
如何对网页进行预加载
472浏览 • 1回复 待解决
HarmonyOS Web 加载URL异常
290浏览 • 1回复 待解决