Web頁面出現白屏的原因眾多，本文列舉了若干常見白屏問題的排查步驟，供開發者快速定位。

1.首先排查權限和網絡狀態。

2.通過使用DevTools工具調試前端頁面定位具體報錯類型（跨域、資源404、JS異常）。

3.在復雜布局場景中，排查渲染模式及組件約束條件的問題。

4.處理H5代碼兼容性問題。

5.從日志中排查生命周期和網絡加載相關關鍵字。

檢查權限和網絡狀態

如果應用未開啟聯網或文件訪問權限或者設備網絡狀態不佳，將導致Web組件加載失敗或頁面元素缺失，進而引起白屏。

驗證設備的網絡狀態，包括是否已連接網絡，設備自帶的瀏覽器能否正常訪問網頁等（在線頁面場景）。

確保應用已添加網絡權限：ohos.permission.INTERNET（在線頁面必需）。

// 在module.json5中添加相關權限
"requestPermissions":[
 {
  "name":"ohos.permission.INTERNET"
 }
]

開啟相關權限：

// xxx.ets
import{ webview }from'@kit.ArkWeb';
@Entry
@Component
structWebComponent{
controller: webview.WebviewController=newwebview.WebviewController();
build() {
 Column() {
  Web({src:'www.example.com',controller:this.controller})
    .domStorageAccess(true)
    .fileAccess(true)
    .imageAccess(true)
    .onlineImageAccess(true)
    .javaScriptAccess(true)
  }
 }
}

修改UserAgent后再觀察頁面是否恢復正常。

// xxx.ets
import{ webview }from'@kit.ArkWeb';
import{BusinessError}from'@kit.BasicServicesKit';
@Entry
@Component
structWebComponent{
controller: webview.WebviewController=newwebview.WebviewController();
@StatecustomUserAgent:string=' DemoApp';
build() {
 Column() {
  Web({src:'www.example.com',controller:this.controller})
   .onControllerAttached(() =>{
   console.log("onControllerAttached");
   try{
    letuserAgent =this.controller.getUserAgent() +this.customUserAgent;
    this.controller.setCustomUserAgent(userAgent);
    }catch(error) {
    console.error(`ErrorCode:${(errorasBusinessError).code}, Message:${(errorasBusinessError).message}`);
    }
   })
  }
 }
}

使用DevTools工具進行頁面內容驗證

在確保網絡與權限配置無誤后，若仍出現白屏，則應利用DevTools工具調試前端頁面以及監聽Web相關錯誤上報接口，來定位具體報錯類型。

1.查閱控制臺的錯誤信息，定位具體的資源加載失敗問題。資源加載失敗會導致頁面元素缺失，布局紊亂，圖片和動畫效果失效等，嚴重時可能導致渲染進程崩潰，頁面呈現空白。如圖所示，依次排查：

（1）元素是否完整，html元素、結構是否正確。

（2）控制臺是否有報錯。

（3）網絡里面是否有資源加載時間特別長等。

2.檢查控制臺，確認是否存在因MixedContent策略或CORS策略導致的異常，或JS錯誤等。可參考解決Web組件本地資源跨域問題。為了提高安全性，ArkWeb內核禁止file協議和resource協議訪問跨域請求。因此，在使用Web組件加載本地離線資源的時候，Web組件會攔截file協議和resource協議的跨域訪問。Web組件無法訪問本地跨域資源時，DevTools控制臺會顯示報錯信息：

Accesstoscriptat'xxx'fromorigin'xxx'has been blockedbyCORS policy:Crossorigin requestsareonlysupportedforprotocol schemes:  http, arkweb, data, chrome-extension, chrome, https, chrome-untrusted.

有如下兩種解決方法：

方法一：

開發者應使用http或https協議替代file或resource協議，確保Web組件能夠成功訪問跨域資源。替代的URL域名應為自定義構造，僅限于個人或組織使用，以防止與互聯網上的實際域名沖突。此外，開發者需要利用Web組件的onInterceptRequest方法，對本地資源進行攔截和相應替換。

以下結合示例說明如何使用http或者https等協議解決本地資源跨域訪問失敗的問題。其中，index.html和js/script.js文件置于工程的rawfile目錄下。當使用resource協議訪問index.html時，js/script.js文件因跨域而被攔截，無法加載。在示例中，使用https://www.example.com/域名替換了原有的resource協議，同時利用onInterceptRequest接口替換資源，確保js/script.js文件可以成功加載，從而解決跨域攔截問題。

// main/ets/pages/Index.ets
import{ webview }from'@kit.ArkWeb';
@Entry
@Component
structIndex{
@Statemessage:string='Hello World';
webviewController: webview.WebviewController=newwebview.WebviewController();
// 構造域名和本地文件的映射表
 schemeMap =newMap([
  ["https://www.example.com/index.html","index.html"],
  ["https://www.example.com/js/script.js","js/script.js"],
 ])
// 構造本地文件和構造返回的格式mimeType
 mimeTypeMap =newMap([
  ["index.html",'text/html'],
  ["js/script.js","text/javascript"]
 ])
build() {
 Row() {
  Column() {
   // 針對本地index.html,使用http或者https協議代替file協議或者resource協議，并且構造一個屬于自己的域名。
   // 本例中構造www.example.com為例。
   Web({src:"https://www.example.com/index.html",controller:this.webviewController})
     .javaScriptAccess(true)
     .fileAccess(true)
     .domStorageAccess(true)
     .geolocationAccess(true)
     .width("100%")
     .height("100%")
     .onInterceptRequest((event) =>{
     if(!event) {
      return;
      }
     // 此處匹配自己想要加載的本地離線資源，進行資源攔截替換，繞過跨域
     if(this.schemeMap.has(event.request.getRequestUrl())) {
      letrawfileName:string=this.schemeMap.get(event.request.getRequestUrl())!;
      letmimeType =this.mimeTypeMap.get(rawfileName);
      if(typeofmimeType ==='string') {
       letresponse =newWebResourceResponse();
       // 構造響應數據，如果本地文件在rawfile下，可以通過如下方式設置
        response.setResponseData($rawfile(rawfileName));
        response.setResponseEncoding('utf-8');
        response.setResponseMimeType(mimeType);
        response.setResponseCode(200);
        response.setReasonMessage('OK');
        response.setResponseIsReady(true);
       returnresponse;
       }
      }
     returnnull;
     })
   }
   .width('100%')
  }
  .height('100%')
 }
}

// main/resources/rawfile/js/script.js
constbody =document.body;
constelement =document.createElement('div');
element.textContent='success';
body.appendChild(element);

方法二：

通過setPathAllowingUniversalAccess設置一個路徑列表。當使用file協議訪問該列表中的資源時，允許進行跨域訪問本地文件。此外，一旦設置了路徑列表，file協議將僅限于訪問列表內的資源(此時，fileAccess的行為將會被此接口行為覆蓋)。路徑列表中的路徑應符合以下任一路徑格式：

1.應用文件目錄通過Context.filesDir獲取，其子目錄示例如下：

/data/storage/el2/base/files/example

/data/storage/el2/base/haps/entry/files/example

2.應用資源目錄通過Context.resourceDir獲取，其子目錄示例如下：

/data/storage/el1/bundle/entry/resource/resfile

/data/storage/el1/bundle/entry/resource/resfile/example

當路徑列表中的任一路徑不滿足上述條件時，系統將拋出異常碼401，并判定路徑列表設置失敗。如果路徑列表設置為空，file協議的可訪問范圍將遵循fileAccess規則，具體示例如下。

// main/ets/pages/Index.ets
import{ webview }from'@kit.ArkWeb';
import{BusinessError}from'@kit.BasicServicesKit';
@Entry
@Component
structWebComponent{
controller:WebviewController=newwebview.WebviewController();
uiContext:UIContext=this.getUIContext();
build() {
 Row() {
  Web({src:"",controller:this.controller})
    .onControllerAttached(() =>{
    try{
     // 設置允許可以跨域訪問的路徑列表
     this.controller.setPathAllowingUniversalAccess([
      this.uiContext.getHostContext()!.resourceDir,
      this.uiContext.getHostContext()!.filesDir+"/example"
      ])
     this.controller.loadUrl("file://"+this.uiContext.getHostContext()!.resourceDir+"/index.html")
     }catch(error) {
     console.error(`ErrorCode:${(errorasBusinessError).code}, Message:${(errorasBusinessError).message}`);
     }
    })
    .javaScriptAccess(true)
    .fileAccess(true)
    .domStorageAccess(true)
  }
 }
}

 



 
 
 
 



 loadFile