How to load CSS file by using URL in WKWebView

依然范特西╮ 提交于 2020-06-17 12:55:25

问题


I want to inject CSS by using URL link ,

Working

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
}()

Expectation

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

https://xyz/styles/style.css

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

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.


回答1:


You can download the remote css file just like any other file type.

Here's a simple example (note: just an example!!! - not intended to be production code!):

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)
            }

        }
    }
}



回答2:


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

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

Use your backend server link for CSS file like ,

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

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

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 .



来源:https://stackoverflow.com/questions/61893390/how-to-load-css-file-by-using-url-in-wkwebview

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!