< 文档首页
全部产品
弹性计算
存储服务
数据库
网络
视频与CDN
域名与网站
应用服务
工商财税 知识产权
互联网中间件
移动研发平台 EMAS
移动研发平台EMAS-专有云
云通信
安全
大数据
人工智能
ET大脑
物联网
物联网行业方案
数字金融
管理与监控
区块链
云市场
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。
    • 金融分布式架构 SOFAStack
      SOFAStack™（Scalable Open Financial Architecture Stack）包含构建金融级云原生架构所需的各个组件，也是在金融场景里锤炼出来的最佳实践。提供微服务应用开发、部署发布、监控运维、项目管理、容灾高可用等全栈式解决方案，并兼容Dubbo、Spring Cloud等微服务运行环境，提供基于虚拟机的经典PaaS运维和基于Kubernetes的云原生运维能力，助力客户各类应用轻松转型分布式和云原生架构。
    • 移动研发平台 EMAS
      移动研发平台（Enterprise Mobile Application Studio，简称EMAS），面向企业服务市场，期望把阿里巴巴近十年在移动互联网行业沉淀的DevOps研发支撑能力、移动App基础中间件能力开放给客户，帮助传统企业快速实现移动数字化的转型目标。