WebView注入CSS必须在DOM就绪前完成，因样式需参与首次渲染；Android应于onPageStarted后、onPageFinished前用evaluateJavascript执行setTimeout包装的动态插入逻辑，iOS则须用WKUserScript.atDocumentStart注入。
WebView注入CSS必须在页面DOM就绪前完成
原生层无法等document.readyState === 'complete'后再注入，因为此时样式已渲染完毕，强行插入<style>可能触发重排但不生效。Android的evaluateJavascript()、iOS的WKWebView.evaluateJavaScript(_:completionHandler:)都要求页面已加载JS执行环境，但最佳时机是WebViewClient.onPageStarted()之后、onPageFinished()之前，且需配合WebSettings.setJavaScriptEnabled(true)和setDomStorageEnabled(true)。
Android用evaluateJavascript()注入CSS最可靠
4.4+系统推荐走JS执行路径，避免过时的loadUrl("javascript:...")（会触发页面跳转白屏）。关键点：
- 必须确保CSS字符串已转义单双引号，否则JS语法报错；可先用
JSON.stringify()包裹再拼接 - 注入代码应包装在
setTimeout(() => { ... }, 0)中，绕过WebView内部同步执行限制 - 不要依赖
document.head存在——某些SPA首屏可能还没挂载head，改用document.documentElement或document.body兜底
示例片段：
<pre class="brush:php;toolbar:false;">String css = "body { background: #f0f0f0; } .hybrid-fix { padding-top: env(safe-area-inset-top); }";
String js = "setTimeout(() => { const style = document.createElement('style'); style.textContent = " + JSON.stringify(css) + "; (document.head || document.documentElement).appendChild(style); }, 0);";
webView.evaluateJavascript(js, null);
iOS WKWebView需用addUserScript()而非JS执行
直接evaluateJavaScript在WKNavigationDelegate.navigationResponse阶段调用容易失败，因JS上下文未完全初始化。正确做法是用WKUserContentController.addUserScript(_:)，指定injectionTime: .atDocumentStart：
立即学习“前端免费学习笔记（深入）”；
- 此方式在HTML解析前注入，确保所有元素都能匹配CSS选择器
- 不能传入变量或动态内容，CSS必须是静态字符串；如需动态值，得走JSBridge回调后二次注入
- 注意
forMainFrameOnly: true——若页面含iframe，需设为false并处理跨frame样式隔离
Swift示例：
<pre class="brush:php;toolbar:false;">let css = "html { --primary-color: #007AFF; }"
let script = WKUserScript(source: "var style = document.createElement('style'); style.textContent = \(css); document.head.appendChild(style);", injectionTime: .atDocumentStart, forMainFrameOnly: true)
userContentController.addUserScript(script)
注入后样式不生效的三个高频原因
CSS注入不是“写了就有效”，常见失效链路：
- WebView开启了
setAllowContentAccess(false)或<code>setAllowFileAccess(false)，导致内联样式被策略拦截（尤其调试时用file://协议） - 原生侧注入时机早于CSSOM构建，而JS执行又晚于渲染树生成，造成样式表未参与首次绘制；此时需搭配
postMessage通知H5端手动forceUpdate或re-render - H5页面用了CSS-in-JS方案（如styled-components），其运行时生成的class名与注入CSS的选择器不匹配，必须用
:global(...)或!important强覆盖
真正难的不是注入动作本身，而是让样式在任意生命周期节点、任意渲染模式下都稳定生效——这需要原生与前端对渲染流程有共同认知，而不是各写各的逻辑。
