全部产品
云市场

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

更新时间:2020-03-25 20:56:27

错误描述

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 站点的证书没有安全问题。

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