0

我想通过使用 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 文件。

4

2 回答 2

0

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

        }
    }
}
于 2020-05-19T16:06:04.037 回答
0

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

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

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

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

然后发出JavaScript注入问题，我将JavaScript注入代码样式更改为如下代码所示链接，我在“覆盖func viewDidAppear（_动画：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

我的问题现在已经解决了，希望这个解决方案能帮助某人通过使用链接来应用 css，如果有人想要任何帮助将 CSS 应用到 webView，请告诉我，我很乐意提供帮助。

于 2020-05-21T18:20:23.990 回答