iOS WKWebView 本地HTML、JS、CSS文件加载详解

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]];
    }

image

由此可见：相对路径方式加载 是可以正常引用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]];