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

Question

我想使用 URL link ,

注入 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 文件存储在我们的服务器中，有一些路径 link 让我们说，

https://xyz/styles/style.css

所以我想通过 URL link ,

应用 style.css 文件

请帮助我仅使用 URL 来应用 CSS 文件，我不想将其存储在捆绑包中，捆绑包 CSS 文件已经为我工作，我们的CSS 样式会动态变化所以我想应用 URL link CSS 文件。

Answer 1

您可以像下载任何其他文件类型一样下载远程 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)
            }

        }
    }
}

Answer 2

感谢 help/suggestion/answers 回答我的问题。

我找到了通过使用 CSS 文件的 URL 将 CSS 文件应用到 webview 的解决方案。

将您的后端服务器 link 用于 CSS 文件，例如 ,

    let cssURL = "https://xyz/styles/style.css" // Use your server css file url link

然后 JavaScript 注入问题，我已经将 JavaScript 注入代码 style 更改为 link 就像下面的代码，我在 "override func viewDidAppear(_ animated: Bool)" 方法中编写的所有代码，只需复制粘贴代码,它也会对你有用。

            let source = """
            var link = document.createElement('link');
            link.href = '\(cssURL)';
            link.rel= 'stylesheet'
            document.head.appendChild(link);
            """
            let userScript = WKUserScript(source: source,
                                          injectionTime: .atDocumentEnd,
                                          forMainFrameOnly: true)
            
            let userContentController = WKUserContentController()
            userContentController.addUserScript(userScript)
            
            let configuration = WKWebViewConfiguration()
            configuration.userContentController = userContentController
            
            self.webView = WKWebView(frame: self.documentDiscriptionView.bounds,
                                     configuration: configuration)
            self.webView.navigationDelegate = self
            self.webView.scrollView.isScrollEnabled = false
            self.webView.scrollView.bounces = false
            
            self.webView.isOpaque = false
            self.webView.backgroundColor = UIColor.clear
            self.webView.scrollView.backgroundColor = UIColor.clear
            
            self.self.webViewContainerView.addSubview( self.webView)
            
    ///// Set Constraint
            self.webView.translatesAutoresizingMaskIntoConstraints = false
            self.webView.leadingAnchor.constraint(equalTo: self.webViewContainerView.leadingAnchor, constant: 0).isActive = true
            self.webView.trailingAnchor.constraint(equalTo: self.webViewContainerView.trailingAnchor, constant: 0).isActive = true
            self.webView.topAnchor.constraint(equalTo: self.webViewContainerView.topAnchor, constant: 0).isActive = true
            self.webView.bottomAnchor.constraint(equalTo: self.webViewContainerView.bottomAnchor, constant: 0).isActive = true

我的问题现在已经解决了，希望这个解决方案可以帮助使用 link 申请 css 的人，如果有人需要任何形式的申请帮助，请告诉我 CSS 到 webView，我很乐意提供帮助。

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

How to load CSS file by using URL in WKWebView

css

ios

swift

wkwebview

evaluatejavascript