iOS WebView 如何从加载本地的Html

关于如何加载储存在沙盒的Html

一般我们加载本地Html的时候,如果只是单纯的Html,或者是CSS,JS全部内嵌在Html文件中,那么没啥大问题,我们只需单纯的加载这个文件就好了.

[self.web loadHTMLString:[NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil] baseURL:nil];

但是一般web不会把JS , CSS 直接内嵌到Html内部,一般都会分开.就像下图所示一样,很多时候结构可能更加复杂.这个时候加载本地的web就会遇到问题了.

示例代码的文件层次图

iOS8 系统下WKWebView 和 WebViewd加载本地的web

iOS8 系统不能有效加载Html 关联的js css 和资源文件,需要将文件拷贝到一个临时文件夹内,然后无论WKWebView 和 WebViewd都可以加载了

    
- (NSURL*)fileURLForBuggyWKWebView8:                (NSURL*)fileURL {
    NSError*error =nil;

    if(!fileURL.fileURL|| ![fileURLcheckResourceIsReachableAndReturnError:&error]) {

        returnnil;

    }

    // Create "/temp/www" directory

 NSFileManager *fileManager= [NSFileManager defaultManager];

 NSURL *temDirURL = [[NSURL fileURLWithPath:NSTemporaryDirectory()] URLByAppendingPathComponent:@"www"];

[fileManagercreateDirectoryAtURL:temDirURL withIntermediateDirectories:YES attributes:nil error:&error];

    NSURL*dstURL = [temDirURLURLByAppendingPathComponent:fileURL.lastPathComponent];

    // Now copy given file to the temp directory

 [fileManagerremoveItemAtURL:dstURLerror:&error];

    [fileManagercopyItemAtURL:fileURLtoURL:dstURLerror:&error];

    // Files in "/temp/www" load flawlesly :)

    returndstURL;
    }
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
 NSString*path = [pathsobjectAtIndex:0];

NSString *basePath = [NSString stringWithFormat:@"%@/%@",path,@"QueHTML/"];
NSURL *fileURL = [self fileURLForBuggyWKWebView8:  [NSURL fileURLWithPath:basePath]];

WKWebView *webView = [[WKWebView alloc]initWithFrame:CGRectMake(0 * self.view.bounds.size.width, 0, self.view.bounds.size.width, self.view.bounds.size.height-64)];

webView.navigationDelegate = self;

webView.UIDelegate=self;

[self.view  addSubview:webView];

[webViewloadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[NSTemporaryDirectory() stringByAppendingPathComponent: [NSString stringWithFormat:@"www/QueHTML/LocaliOS.html"]]]]];

PS:注意这里面还有一个隐藏的bug,那就是js的文件中不能含有window.addEventListener函数,这个函数在iOS8上为Undefinded 会导致整个js文件所有的代码都不执行

iOS9 WKWebView 和WebView 加载本地web

iOS9加载本地web文件,需要指定整个文件夹的路径,这样web才能完整的加载

 NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
 NSString *path = [paths objectAtIndex:0];
 NSString *basePath = [NSString stringWithFormat:@"%@/%@",path,@"QueHTML/"];
 NSString *htmlPath =  [NSString stringWithFormat:@"%@/%@",path,@"QueHTML/LocaliOS.html"];
 NSURL *fileURL = [NSURL fileURLWithPath:htmlPath];
 WKWebView *webView = [[WKWebView alloc]initWithFrame:CGRectMake(0 * self.view.bounds.size.width, 0, self.view.bounds.size.width, self.view.bounds.size.height-64)];      
 webView.navigationDelegate = self;
 webView.UIDelegate = self;
 [self.view  addSubview:webView];
 [webView loadHTMLString:[NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil] baseURL:[NSURL fileURLWithPath:basePath isDirectory:YES]];
 //当然也可以使用下面的系统函数加载
 // [webView loadFileURL:fileURL allowingReadAccessToURL:[NSURL fileURLWithPath:basePath isDirectory:YES]];

PS:iOS9中跟iOS8的注意事项一样,js中不能使用window.addEventListener函数

iOS10及之后WKWebView 和WebView 加载本地web

iOS10之后一下两个系统函数都可以加载本地web,而且没有任何的限制,包括前面的js函数的限制

 [webView loadHTMLString:[NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil] baseURL:[NSURL fileURLWithPath:basePath isDirectory:YES]];
 //当然也可以使用下面的系统函数加载
// [webView loadFileURL:fileURL allowingReadAccessToURL:[NSURL fileURLWithPath:basePath isDirectory:YES]];

---

PS1:如何debug WebView 首先打开safari的偏好设置,在高级选项中选择在菜单栏中显示开发选项 ,然后当你debug 你的项目的时候在safari的选项中就可以看到正常运行的webView了,不过safari的调试有点不稳定

PS2:有时候你可能发现自己的js css 都没加载,这个时候debug一下,确定js css文件有没有乱码 ,如果有乱码的现象请在html内连接js css文件的时候注明charset = "utf-8"