All Products
Search
Document Center

HTML5 application load failure: white screen or wrong display with mixed content warning

Last Updated: Mar 10, 2021

Problem description

HTML5 application cannot be displayed normally, and may be partially loaded or completely blank.

During the development process, HTML5 applications may need to reference numerous page resources. If the resource is referenced through the HTTP protocol, it may not be loaded when opened through the offline package on the iOS platform. When the HTML5 container opens the offline package, the page loading is achieved through HTTPS://<appid>.<H5 virtual domain name>. Therefore, HTTP resources in the page will cause WebView Mixed Content warnings. Some resources such as JavaScript files and iframe pages will fail to load.

error image

Troubleshoot

When you find that the offline package page cannot be loaded normally, you can debug the WebView through the browser.

  1. Choose Safari > Development > Target Machine > Page of Target Offline Package.
    target page
  2. Click the Refresh button to reload the page in the WebView.
    refresh
  3. Check whether there are blocked page resources in the console.
    Blocked

Solution

Ensure that all page resources are loaded through HTTPS, and the certificate of the HTTPS site has no security issues.

Click the following link to download code sample containing errors: