< 文档首页
全部产品
弹性计算
存储
数据库
安全
大数据
人工智能
网络与CDN
视频服务
容器与中间件
开发与运维
API与工具
物联网
物联网行业方案
专有云
专有云（线下）
企业应用与服务
数字金融
域名与网站
工商财税与知识产权
解决方案
会员服务
更多

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

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

    上一篇：H5 应用加载失败，且伴有 RPC 7000 系列错误
    下一篇：H5 应用加载失败：页面提示：“NoSuchKey. The specified key does not existed...”
    相关文档
    相关产品
    • 移动开发平台 mPaaS
      移动开发平台（Mobile PaaS，简称 mPaaS）是源于支付宝 App 的移动开发平台，为移动开发、测试、运营及运维提供云到端的一站式解决方案，能有效降低技术门槛、减少研发成本、提升开发效率，协助企业快速搭建稳定高质量的移动 App。
    • 移动研发平台 EMAS
      移动研发平台（Enterprise Mobile Application Studio，简称EMAS），面向企业服务市场，期望把阿里巴巴近十年在移动互联网行业沉淀的DevOps研发支撑能力、移动App基础中间件能力开放给客户，帮助传统企业快速实现移动数字化的转型目标。
    • 移动推送
      移动推送（Mobile Push）是提供给移动开发者的移动端消息推送服务，通过在App中集成推送功能，进行高效、精准、实时的消息推送，从而使业务及时触达用户，提高用户粘性。