iOS WKWebView 本地HTML、JS、CSS文件加载详解
Tips:
NSString类型的文件路径转换为URL的时候，一定要用
NSURL *pathURL = [NSURL fileURLWithPath:filePath];方法去转换，否则资源URL不合法，APP会崩溃
上源码接口：
loadRequest方式加载
-
API : iOS8即可使用
- (nullable WKNavigation *)loadRequest:(NSURLRequest *)request; -
用途：
- 1：主要用来加载网络URL
- 2：也可以加载本地HTML文件（本文重点）
loadFileURL
-
API: URL:文件相对路径 readAccessURL：访问文件需要引用的文件的路径 一般都是比
URL大一级或者更高几级- (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL API_AVAILABLE(macosx(10.11), ios(9.0)); 用途：主要用于加载本地文件（一般指相对路径）
loadHTMLString
API:
- (nullable WKNavigation *)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;用途：主要用于 HTML转换成的字符串（比如：编程APP）
loadData
-
API: 值得一提的是MIMETType,text/html、image/jpg、text/plain
- (nullable WKNavigation *)loadData:(NSData *)data MIMEType:(NSString *)MIMEType characterEncodingName:(NSString *)characterEncodingName baseURL:(NSURL *)baseURL API_AVAILABLE(macosx(10.11), ios(9.0)); 用途：主要用于加载 二进制状态下的文件，主要包括HTML、Image、Text文本
开发中的HTML文件位置
HTML位于工程内的黄色文件夹下
这是咱们一般的文件添加方式，这属于绝对路径的添加
loadRequest 加载方式
Tips:
iOS8 的时候只能通过这个loadRequest方法去加载
iOS8 WKWebView的加载本地文件的方式本文后面会有 详细方案
NSString *bundleStr = [[NSBundle mainBundle] pathForResource:@"feedback" ofType:@"html"];
_feedbackUrl = [NSURL fileURLWithPath:bundleStr];
[_webview loadRequest:[NSURLRequest requestWithURL:_feedbackUrl]];
warning！！！
页面能加载出来，但是效果是很差的，因为CSS、JS、图片资源文件没有得到正确的引用！
那我们该通过什么方式来让这些附属的文件得到正确引用呢？
iOS9之后新增了 loadFileURL 等一系列加载本地文件的方法
loadFileURL加载方式
iOS9之后才出现这个加载方式
NSString *bundleStr = [[NSBundle mainBundle] pathForResource:@"feedback" ofType:@"html"];
_feedbackUrl = [NSURL fileURLWithPath:bundleStr];
if (@available(iOS 9.0, *)) {
[_webview loadFileURL:[NSURL fileURLWithPath:bundleStr] allowingReadAccessToURL:[NSURL fileURLWithPath:[NSBundle mainBundle].bundlePath]];
} else {
// Fallback on earlier versions
}
哇塞！加载出来了耶！但是 依旧是没能加载其他资源文件啊 😰
客观，稍安勿躁 ~
HTML位于工程内的蓝色文件夹下
特殊文件添加方式，尤其是文件之间有相互引用的时候用这种方式
loadRequest 方式
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"feedback" ofType:@"html" inDirectory:@"FeedbackH5/pages"];
NSURL *pathURL = [NSURL fileURLWithPath:filePath];
if (@available(iOS 9.0, *)) {
[_webview loadRequest:[NSURLRequest requestWithURL:pathURL]];
}
loadFileURL 方式加载
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"feedback" ofType:@"html" inDirectory:@"FeedbackH5/pages"];
NSURL *pathURL = [NSURL fileURLWithPath:filePath];
if (@available(iOS 9.0, *)) {
// [_webview loadRequest:[NSURLRequest requestWithURL:pathURL]];
[_webview loadFileURL:[NSURL fileURLWithPath:filePath] allowingReadAccessToURL:[NSURL fileURLWithPath:[NSBundle mainBundle].bundlePath]];
}
由此可见：相对路径方式加载 是可以正常引用JS、css等资源文件的
但是 iOS 8系统下，依旧加载不出来！！！
HTML位于APP沙盒下Document文件夹
iOS8既然添加到工程中引用，一直引用不到，我们可以让他从document路径下引用试试！
这个方法可以适配 iOS8系统下WKWebView加载本地文件了？
你还太天真！！！
//项目中的文件夹路径
NSString *directoryPath = [KFileManger appSourceName:@"FeedbackH5" andType:@""];
//沙盒中的document路径
NSString *documentpath = [KFileManger documentPath];
//copy文件夹到 document 路径下
[KFileManger copyMissingFile:directoryPath toPath:documentpath];
//document 路径下的HTML文件路径
NSString *homePath = [[KFileManger documentPath] stringByAppendingString:@"/FeedbackH5/pages/feedback.html"];
//document 路径下的HTML文件 URL
NSURL *docSourceURL = [NSURL fileURLWithPath:homePath];
[_webview loadRequest:[NSURLRequest requestWithURL:docSourceURL]];
果然不出所料(zhe jiu shi wo xiang yao de)，模拟器上能正常加载出界面，图片、CSS但是JS交互是不行的
在真机 依旧加载不出任何界面！
HTML位于APP沙盒下tmp临时缓存文件夹
亲爱的客观们，这才是iOS8系统下加载有相互引用关系的HTML、JS、CSS以及图片资源的正确方法(当前知道的唯一方法如有新的方式私信我哦~)！😊
//项目中的文件夹路径
NSString *directoryPath = [KFileManger appSourceName:@"FeedbackH5" andType:@""];
//tmp缓存文件夹路径
NSString *tmpPath = [KFileManger tmpPath];
//新文件夹名字
NSString *wwwDir =@"www";
//tmp文件夹下创建www文件夹
[KFileManger createDirWithPath:tmpPath andDirectoryName: wwwDir];
//tmp中的www文件夹中的路径
NSString *tmpWWW = [tmpPath stringByAppendingString: wwwDir];
//copy文件夹到 tmp/www 路径下
[KFileManger copyMissingFile:directoryPath toPath:tmpWWW];
// 字符 tmp/www/FeedbackH5/pages/feedback.html 全路径
NSString *tmpWWWFeedback = [tmpWWW stringByAppendingString:@"/FeedbackH5/pages/feedback.html"];
//tmp 操作，字符转换成URL
NSURL *feedbackURL = [NSURL fileURLWithPath:tmpWWWFeedback];
//WKWebView加载
[_webview loadRequest:[NSURLRequest requestWithURL:feedbackURL]];
