如何在WKWebView中通过URL链接注入CSS文件

要实现通过远程URL注入动态CSS，你不需要再读取本地Bundle里的文件了，取而代之的是直接在用户脚本里创建一个<link>标签，让WebView自动加载服务器上的最新样式资源，完全摆脱本地文件的限制。

下面是修改后的完整代码：

lazy var webView: WKWebView = {
    let source = """
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://xyz/styles/style.css';
    document.head.appendChild(link);
    """
    let preferences = WKPreferences()
    preferences.setValue(true, forKey:"developerExtrasEnabled")
    let userScript = WKUserScript(source: source, injectionTime: .atDocumentStart, forMainFrameOnly: true)
    let userContentController = WKUserContentController()
    userContentController.addUserScript(userScript)
    let configuration = WKWebViewConfiguration()
    configuration.userContentController = userContentController
    configuration.preferences = preferences
    let webView = WKWebView(frame: .zero, configuration: configuration)
    webView.navigationDelegate = self
    webView.scrollView.isScrollEnabled = false
    webView.scrollView.bounces = false
    return webView
}()

关键修改说明： #

• 替换核心注入逻辑：不再读取本地CSS文件内容，而是创建<link>标签指向远程CSS URL，WebView会自动发起网络请求加载最新样式，完美适配CSS动态更新的需求。
• 优化注入时机：把injectionTime调整为.atDocumentStart，让样式在页面DOM开始构建时就被引入，避免页面加载初期出现样式闪烁的问题。如果需要样式在页面完全加载后再生效，也可以保持.atDocumentEnd。
• 移除本地文件读取代码：删掉了原来读取Bundle文件的guard let path = ...和let cssString = ...部分，简化了整体逻辑。

额外注意事项： #

• 缓存处理：如果服务器更新CSS后WebView仍加载旧样式，可以在URL后添加版本号参数（比如https://xyz/styles/style.css?v=1.0.2），每次更新样式时修改版本号，强制WebView获取最新资源；也可以通过服务器配置合适的缓存过期策略。
• 网络权限：确保App已配置网络访问权限，HTTPS URL默认被允许，若使用HTTP则需要在Info.plist中添加NSAppTransportSecurity相关例外配置。

内容的提问来源于stack exchange，提问作者Jaywant Khedkar