先简单介绍下我在工作中关于WKWebView的使用场景：
1、首先是从后台获取到HTML富文本字符串内容，然后使用WKWebView加载出来
2、将CSS样式文件下载到沙盒，以及将CSS样式文件预存到应用程序资源路径下，使用WKWebView加载样式文件。CSS文件下载成功的情况下使用下载的CSS文件，要是下载失败就使用程序资源路径下的CSS文件
加载资源路径下的CSS文件
//imageJS为HTML富文本字符串内容
var imageJS = """
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--meta-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="\(cssFileName).css">
</head style='width:100% !important'>
<body>
<div class="ql-container ql-snow">
<div class="ql-editor">
\(self.HTMLContentStr)
</div>
</div>
</body>
</html>
"""
//self.HTMLContentStr为HTMLbody的内容
//cssFileName为CSS样式文件的名字
cssFileUrl = Bundle.main.bundlePath
//采用loadHTMLString方式加载
self.contentWeb.loadHTMLString(imageJS, baseURL: URL(fileURLWithPath: cssFileUrl))
截屏2019-10-11下午2.52.44.png
加载沙盒路径下的CSS文件
尝试一：
self.contentWeb.loadHTMLString(imageJS, baseURL: URL(fileURLWithPath: cssFileUrl))
//imageJS与上面一样
//cssFileUrl改为沙盒中CSS文件的路径
样式文件没有生效，尝试失败。
尝试二：
self.contentWeb.loadHTMLString(imageJS, baseURL: URL(fileURLWithPath: cssFileUrl, isDirectory: false))
//imageJS与上面一样
//cssFileUrl为沙盒中CSS文件的路径
这个时候用模拟器跑出来是可以正确加载CSS文件的，可是换成真机却没效果了❓❓❓❓❓❓❓❓
这里我尝试了很多办法，可在真机情况下依旧无法加载CSS文件，如果有解决办法，欢迎在评论区讨论🐼
尝试三：
换一种加载方式，使用：
open func loadFileURL(_ URL: URL, allowingReadAccessTo readAccessURL: URL) -> WKNavigation?
do {
//将HTML富文本内容写入沙盒CSS同一文件夹下,采用loadFileURL方式加载
//cssFileUrl为沙盒中CSS文件所在文件夹的路径
let _ = try imageJS.write(to: URL(fileURLWithPath: cssFileUrl + "/content.html"), atomically: true, encoding: .utf8)
let contentURL = URL(fileURLWithPath: cssFileUrl + "/content.html")
let AccessURL = URL(fileURLWithPath: cssFileUrl)
self.contentWeb.loadFileURL(contentURL, allowingReadAccessTo: AccessURL)
}catch{
}
模拟器运行正常，真机运行正常🤠🤠🤠🤠
注意 注意 注意 cssFileUrl为沙盒中CSS文件所在文件夹的路径，即下图中cssFile文件的路径。
截屏2019-10-11下午3.37.53.png
总结下
WKWebView使用：
open func loadHTMLString(_ string: String, baseURL: URL?) -> WKNavigation?
在真机下可以正确加载资源路径下的CSS文件，而在沙盒路径下的CSS文件不能正确加载（如果该方法有加载沙盒路径CSS文件的方法，欢迎大家在评论区告诉我😁😁😁）
WKWebView使用：
open func loadFileURL(_ URL: URL, allowingReadAccessTo readAccessURL: URL) -> WKNavigation?
在真机下可以正确加载沙盒路径下的CSS文件。资源路径为只读，不可写入就不讨论了。
网友评论