WKWebView白屏主因是资源加载失败、JS错误不可见、跳转被拦截、脚本执行时机不当及过早执行evaluateJavaScript;需开启Web Inspector、配置导航代理、禁用async/defer、等待didFinishNavigation后再注入JS。

WKWebView 加载 HTML5 页面白屏,先看控制台有没有 NSLocalizedDescription 错误
白屏最常见原因是资源加载失败但没抛出明显错误。iOS 的 WKWebView 默认不打印 JS 错误到 Xcode 控制台,需手动开启调试支持。确保在创建 WKWebView 前设置了 configuration.preferences.javaScriptEnabled = true,且启用了开发者选项:WKWebViewConfiguration().preferences.javaScriptCanOpenWindowsAutomatically = true。真机调试时,必须在 Settings → Safari → Advanced → Web Inspector 打开开关,然后用 Mac 的 Safari → Develop 菜单连接设备查看控制台报错。
HTML5 页面里用了 window.open 或 location.href 跳转,iOS 会静默拦截导致白屏
WKWebView 对弹窗和跳转限制极严,window.open('xxx.html')、location.href = 'xxx.html' 在未配置导航代理时直接失效,页面卡住不动,视觉上就是白屏。解决方式是实现 WKNavigationDelegate 的 webView:decidePolicyForNavigationAction:decisionHandler: 方法,并对 navigationAction.request.URL 做白名单判断;或改用 webView.load(URLRequest(url: url)) 主动加载。
- 避免在 HTML 中写
onclick="window.open(...)”,改用postMessage通知原生层跳转 - 本地 HTML 文件(
file://协议)下fetch或XMLHttpRequest会被 CORS 拦截,改用WKWebView的loadFileURL:allowingReadAccessToURL:并传入父目录 URL
HTML5 页面用了 async 或 defer 脚本,但依赖顺序错乱引发白屏
iOS WKWebView 对脚本执行时机更敏感,尤其当入口 JS 依赖某个尚未解析完成的模块时,document.body 可能为空,querySelector 失败后无 fallback 就停在白屏。检查 HTML 中是否在 里写了 ,而 app.js 里又立即操作 DOM。
- 开发阶段统一用
(无 async/defer)保证执行顺序 - 确保 JS 入口包裹在
document.addEventListener('DOMContentLoaded', ...)或$(function(){...})中 - 若用 Vue/React,确认打包后
index.html的挂载点(如)存在且未被提前移除
WKWebView 初始化后没等 webView(_:didFinishNavigation:) 就调用 evaluateJavaScript(_:completionHandler:)
很多业务逻辑(比如注入 JS、上报 PV、设置 token)习惯在 webView.load(...) 后立刻执行 evaluateJavaScript,但此时页面可能还没开始渲染,JS 上下文不存在,回调直接返回 nil 或 crash,表面现象就是白屏无响应。必须等 webView(_:didFinishNavigation:) 触发后再执行任何 JS 注入。
立即学习“前端免费学习笔记(深入)”;
- 不要在
webView(_:didStartProvisionalNavigation:)里调 JS,此时 document 还未创建 - 如果需要首帧前注入,考虑用
WKUserScript配合at: .start注入,但注意它不能访问window全局对象(除非设为.end) - 调试时可在
didFinishNavigation里加一句webView.evaluateJavaScript("document.body ? 'ok' : 'empty'")确认 DOM 是否就绪
白屏问题往往不是单一原因,而是网络加载、JS 执行、WKWebView 生命周期、CORS、权限配置多个环节耦合的结果。最容易被忽略的是:真机上 file:// 协议下无法发起 fetch 请求,以及 Safari Web Inspector 关闭导致 JS 错误完全不可见——这两点几乎占了线上白屏 case 的六成以上。










