如何在 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文件，

Please help me to apply CSS file by using URL only, I don't want to store it in bundle, bundle CSS file is already working for me, our CSS style will change dynamically so I want apply URL link CSS file.

感谢人们对我的问题的帮助/建议/答案。

我找到了解决方案，通过使用 Z2C56C3605804D854E48C608D47Z 的Z2C56C3605804D854E48C608D47Z文件应用 CSS 文件

使用 CSS 文件的后端服务器链接，例如，

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

然后使用 JavaScript 注入问题，所以，我已经将 JavaScript 注入代码样式更改为如下代码所示链接，我在“覆盖 func viewDidAppear(_ animated: Bool)”方法中编写的所有代码，只需复制粘贴代码，它就可以为您工作出色地。

            let source = """
            var link = document.createElement('link');
            link.href = '\(url)';
            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

我的问题现在已经解决了，希望这个解决方案能帮助有人通过使用链接申请 css，如果有人想要任何帮助申请 CSS 到 Z9F0268549B4CDC23EFC36A9670C90E2，请告诉我