Как загрузить файл CSS с помощью URL-адреса в WKWebView

Question

Я хочу ввести CSS, используя URL-ссылку,

За работой

Работая под кодом, если я сохраню файл 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

Итак, я хочу применить файл style.css с помощью URL-ссылки,

Пожалуйста, помогите мне применить файл CSS, используя только URL-адрес, я не хочу хранить его в пакете, CSS-файл пакета уже работает для меня, наш стиль CSS будет меняться динамически, поэтому я хочу применить файл CSS URL-ссылки.

Answer 1

Спасибо за помощь / предложение / ответы на мой вопрос.

Я нашел решение применить файл CSS к веб-просмотру, используя URL-адрес файла 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 к webView, я буду рад помочь.

Answer 2

Вы можете скачать удаленный файл 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)
            }

        }
    }
}