H5 应用加载失败：白屏或显示不正确，伴有 Mixed Content 警告

错误描述

H5 应用无法正常显示，可能是部分加载或完全白屏状态。

在开发过程中，H5 应用可能需要引用众多的页面资源。如果是通过 HTTP 协议引用的资源，在 iOS 平台上通过离线包打开时则可能存在无法加载的情况。H5 容器打开离线包时，实际是通过 HTTPS://<appid>.<H5虚拟域名> 加载的。因此，页面中的 HTTP 资源会引起 WebView Mixed Content 警告，部分资源（如 JavaScript 文件、iframe 页面等）会无法加载。

error image

问题排查

当发现离线包页面无法正常加载时，可以通过浏览器对 WebView 进行调试。

  1. 打开 Safari > 开发 > 目标机器 > 目标离线包页面。
    target page
  2. 点击刷新按钮，在 WebView 中重新加载页面。
    refresh
  3. 在控制台中检查是否有被阻止（Blocked）的页面资源。
    Blocked

解决方法

保证页面资源均通过 HTTPS 方法加载，且 HTTPS 站点的证书没有安全问题。

点击下方链接下载包含错误的代码示例：