Ios 如何为wkwebview中的某个指定url加载捆绑包中的css文件？
我有一个网络视图。该网页从CDN加载大部分css文件。但是，有一个经常使用的大型css文件，我想把它放在应用程序包中，以便webview加载更快。有人知道如何从捆绑中加载吗 一个简单的例子。网页页面需要在以下位置加载文件：https://cdn.example.com/styles.css. 我想重定向请求，而不是从文件服务器加载它https://cdn.example.com/styles.css 因此，它可以使用捆绑包中的content styles.css响应，甚至可以从磁盘缓存响应 我不想插入css文件。我想将一些css文件请求重定向到我的本地文件url 一个快速的版本将是伟大的Ios 如何为wkwebview中的某个指定url加载捆绑包中的css文件？,ios,swift,wkwebview,Ios,Swift,Wkwebview,我有一个网络视图。该网页从CDN加载大部分css文件。但是，有一个经常使用的大型css文件，我想把它放在应用程序包中，以便webview加载更快。有人知道如何从捆绑中加载吗 一个简单的例子。网页页面需要在以下位置加载文件：https://cdn.example.com/styles.css. 我想重定向请求，而不是从文件服务器加载它https://cdn.example.com/styles.css 因此，它可以使用捆绑包中的content styles.css响应，甚至可以从磁盘缓存响应 我不
谢谢。如下图所示创建style.css文件并拖放到项目目录中
@font-face {
font-family: "Titillium Web";
font-weight: normal;
src: url("TitilliumWeb-Regular.ttf")
}
@font-face {
font-family: "Titillium Web";
font-style: italic;
src: url("TitilliumWeb-Italic.ttf")
}
@font-face {
font-family: "Titillium Web";
font-weight: bold;
src: url("TitilliumWeb-Bold.ttf")
}
body {
margin: 0;
font-family: "Titillium Web";
font-weight: normal;
font-size: 13pt;
}
override func viewDidLoad() {
super.viewDidLoad()
let html = """
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <b>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</b>
<br>
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</i>
<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
"""
let htmlStart = "<HTML><HEAD><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, shrink-to-fit=no\"></HEAD><BODY>"
let htmlEnd = "</BODY></HTML>"
let htmlString = "\(htmlStart)\(html)\(htmlEnd)"
webView.loadHTMLString(htmlString, baseURL: Bundle.main.bundleURL)
self.view.addSubview(webView)
}
您可以将html预加载到字符串中，将本地CSS的内容插入一些样式标记中，最后在WKWebView中显示修改后的字符串 下面您将看到一个有效的解决方案，您只需要在项目中拖动一个名为inject.css的文件。此文件包含要应用的样式 确保您有一个名为webView的WKWebView和一个连接到插座的按钮，以使以下解决方案正常工作此解决方案可能需要一些重构：
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()
}
}
我曾经面对同样的问题，为解决这个问题奋斗了很多，最终找到了解决办法，它就像一个魅力！对我来说 我想通过使用url而不是捆绑CSS文件位置来应用CSS 遵循步骤 给你的CSS文件链接，比如说
let cssURL "https://xyz/styles/style.css"
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)
希望此解决方案能对某人有所帮助，如果需要其他详细信息，请告诉我，我很乐意提供帮助。可能重复我不想要的内容。您是否可以使用URL添加CSS文件link@JaywantKhedkar不，这太棘手了，所以很脆弱，所以我放弃了。我正在尝试同样的方法，但没有找到任何解决方案，当我们在Bundle中添加CSS文件并访问它时，它是有效的，比如，让path=Bundle.main.pathforResource:style，of type:cssbu，但u没有从Bundle加载CSS文件。我想要的是使用捆绑包中的文件，而不是从远程请求，这样webview有望更快地加载。我相信解决方案的一部分将包括如何通过webview捕获加载css文件的请求，以及如何扭曲请求以停止向远程服务器请求文件并从捆绑包返回文件。在您的情况下，然后使用@Pranay solution，我以为您想从远程服务器加载css文件
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)