如何在 WKWebView 中使用 URL 加载 CSS 文件 [英] How to load CSS file by using URL in WKWebView

问题描述

我想使用 URL 链接注入 CSS，

I want to inject CSS by using URL link ,

工作

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

Working below code, If I store CSS file in Bundle path of project,

    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 文件存储在我们的服务器中，有一些路径链接可以说，

I have CSS file which is store in our server having some path link let say ,

https://xyz/styles/style.css

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

So I want to apply style.css file by using URL link ,

请帮助我仅使用 URL 来应用 CSS 文件，我不想将其存储在 bundle 中，bundle CSS 文件已经对我有用，我们的 CSS 样式会动态更改，因此我想应用 URL 链接 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.

推荐答案

感谢大家对我的问题的帮助/建议/答案.

Thanks folks for help/suggestion/answers on my question.

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

I have find solution to apply CSS file to webview by using URL of CSS file .

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

Use your backend server link for CSS file like ,

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

然后出现 JavaScript 注入问题，因此，我将 JavaScript 注入代码 style 更改为 link，如下面的代码，我在 中编写的所有代码覆盖 func viewDidAppear(_animated: Bool)" 方法，只需复制粘贴代码，它也适用于您.

Then issue with JavaScript injection so , I have change JavaScript injection code style to link like below code, All code I have write in "override func viewDidAppear(_ animated: Bool)" method , just copy paste code,It will work to you as well .

            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 应用到 webView，请告诉我，我很乐意提供帮助.

My issue is resolved now , Hope so this solution will help to someone to apply css by using link, Please let me know if any one wants any kind of help to apply CSS to webView, I will happy to help .

这篇关于如何在 WKWebView 中使用 URL 加载 CSS 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！