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

    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。
    • 金融分布式架构 SOFAStack
      SOFAStack™（Scalable Open Financial Architecture Stack）包含构建金融级云原生架构所需的各个组件，也是在金融场景里锤炼出来的最佳实践。提供微服务应用开发、部署发布、监控运维、项目管理、容灾高可用等全栈式解决方案，并兼容Dubbo、Spring Cloud等微服务运行环境，提供基于虚拟机的经典PaaS运维和基于Kubernetes的云原生运维能力，助力客户各类应用轻松转型分布式和云原生架构。
    • 移动推送
      移动推送（Mobile Push）是提供给移动开发者的移动端消息推送服务，通过在App中集成推送功能，进行高效、精准、实时的消息推送，从而使业务及时触达用户，提高用户粘性。