在移动端混合开发Hybrid中如何通过原生Bridge注入CSS？-css教程-PHP中文网

webview注入css必须在dom就绪前完成，因样式需参与首次渲染；android应于onpagestarted后、onpagefinished前用evaluatejavascript执行settimeout包装的动态插入逻辑，ios则须用wkuserscript.atdocumentstart注入。

在移动端混合开发hybrid中如何通过原生bridge注入css？

WebView注入CSS必须在页面DOM就绪前完成

原生层无法等document.readyState === 'complete'后再注入，因为此时样式已渲染完毕，强行插入<style></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：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

此方式在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强覆盖

真正难的不是注入动作本身，而是让样式在任意生命周期节点、任意渲染模式下都稳定生效——这需要原生与前端对渲染流程有共同认知，而不是各写各的逻辑。