时间戳

首页 > 解决方案 > 如何在 WKWebView 中使用 URL 加载 CSS 文件

css - 如何在 WKWebView 中使用 URL 加载 CSS 文件

问题描述

我想通过使用 URL 链接注入CSS ，

在职的

在代码下面工作，如果我将 CSS 文件存储在项目的Bundle路径中，

    lazy var webView: WKWebView = {
    guard let path = Bundle.main.path(forResource: "style", ofType: "css") else {
        return WKWebView()
    }

    let cssString = try! String(contentsOfFile: path).components(separatedBy: .newlines).joined()
    let source = """
    var style = document.createElement('style');
    style.innerHTML = '\(cssString)';
    document.head.appendChild(style);
    """
    let preferences = WKPreferences()
    preferences.setValue(true, forKey:"developerExtrasEnabled")
    let userScript = WKUserScript(source: source,
                                  injectionTime: .atDocumentEnd,
                                  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 文件，它存储在我们的服务器中，有一些路径链接，可以说，

https://xyz/styles/style.css

所以我想通过使用 URL 链接来应用style.css文件，

请帮助我仅使用 URL 应用 CSS 文件，我不想将其存储在 bundle 中，bundle CSS 文件已经为我工作，我们的 CSS 样式将动态更改，所以我想应用 URL 链接 CSS 文件。

标签： cssiosswiftwkwebviewevaluatejavascript

解决方案

您可以像下载任何其他文件类型一样下载远程 css 文件。

这是一个简单的例子（注意：只是一个例子！！！ -不打算成为生产代码！）：

func gotTheCSS(_ css: String) -> Void {
    print(css)
    // here is where you would inject it, just like you did when
    //  loading it from the bundle
}

override func viewDidLoad() {
    super.viewDidLoad()

    DispatchQueue.global().async {
        if let url = URL(string: "http://yoursite.com/css/style.css") {

            do {
                let cssString = try String(contentsOf: url, encoding: String.Encoding.utf8)
                self.gotTheCSS(cssString)
            }
            catch {
                print(error)
            }

        }
    }
}

推荐阅读