Comment charger un fichier CSS dans Bundle pour une URL spécifiée dans WKWebView?

Créer un fichier style.css comme ci-dessous et faites glisser-déposer dans votre répertoire de projet xxx pré>

Ajouter le code source ci-dessous dans la vue UIViewController () P>

  lazy var webView: WKWebView = {
    guard
      let path = Bundle.main.path(forResource: "style", ofType: "css"),
      let cssString = try? String(contentsOfFile: path).components(separatedBy: .newlines).joined()
      else {
        return WKWebView()
    }

    let source = """
    var style = document.createElement('style');
    style.innerHTML = '\(cssString)';
    document.head.appendChild(style);
    """

    let userScript = WKUserScript(source: source,
                                  injectionTime: .atDocumentEnd,
                                  forMainFrameOnly: true)

    let userContentController = WKUserContentController()
    userContentController.addUserScript(userScript)

    let configuration = WKWebViewConfiguration()
    configuration.userContentController = userContentController

    let webView = WKWebView(frame: self.view.frame,
                            configuration: configuration)
    return webView
  }()

Vous pouvez précharger votre code HTML à une chaîne, injecter le contenu de votre CSS local à l'intérieur de certaines balises de style et indiquez enfin que la chaîne modifiée dans votre WKWebView.

ci-dessous, vous verrez une solution de travail, vous devez juste avoir besoin de Faites glisser un fichier appelé inject.css à l'intérieur de votre projet. Ce fichier contient le style que vous souhaitez appliquer. P>

Assurez-vous que vous avez une WKWebView appelée WebView et un bouton connecté aux points de vente pour effectuer les travaux de solution suivants (cette solution nécessite probablement un refactoring): P>

import UIKit
import WebKit

class ViewController: UIViewController {
  @IBOutlet weak var webView: WKWebView!

  @IBAction func loadStuffTapped(_ sender: Any) {

    injectCssAndShow(url: "https://www.wikipedia.org/")

  }

  // this one loads the css from your bundle
  func loadCss()->String? {
    if let filepath = Bundle.main.path(forResource: "inject", ofType: "css") {
      do {
        let contents = try String(contentsOfFile: filepath)
        print(contents)
        return contents
      } catch {
        // contents could not be loaded
      }
    } else {
      // inject.css not found!
    }
    return nil
  }

// this (kind of bloated...) function loads the orignal html, injects your css and shows the modified version inside of your WKWebview
  func injectCssAndShow(url: String) {

    let request = NSMutableURLRequest(url: NSURL(string: url)! as URL,
                                      cachePolicy: .useProtocolCachePolicy,
                                      timeoutInterval: 10.0)
    request.httpMethod = "GET"

    let session = URLSession.shared
    let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
      if (error != nil) {
        print(error as Any)
      } else {
        let htmlString = String(decoding: data ?? Data(), as: UTF8.self)

        DispatchQueue.main.async {

          let result = htmlString.range(of: "<title>",
                                        options: NSString.CompareOptions.literal,
                                        range: htmlString.startIndex..<htmlString.endIndex,
                                        locale: nil)

          if let range = result {
            let start = range.lowerBound
            let injection = self.loadCss() ?? ""
            let modifiedHtml = "\(htmlString[htmlString.startIndex..<start]) <style>\(injection)</style> \(htmlString[start..<htmlString.endIndex])"
            self.webView.loadHTMLString(modifiedHtml, baseURL: URL.init(string: url))
          }
        }
      }
    })

    dataTask.resume()

  }
}

J'ai le même problème, luttez-vous beaucoup à résoudre le problème, de trouver enfin une solution et cela a fonctionné comme un charme! Pour moi,

Je veux appliquer CSS à l'aide de l'URL à l'aide de l'adresse de fichier CSS de l'URL, P>

suivez les étapes, strong> p>

1. Donnez votre lien de fichier CSS Laisser par exemple, P> XXX PRE> LI> ol>

   2.Change JavaScript strong> code d'injection style fort> à link strong> Comme ci-dessous code, P>

          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)