ios图文详情加载html_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]];