OC与JS交互前言

OC与JS交互过程中，可能会需要使用本地image资源及html,css,js文件，这些资源应该如何被加载？

一、WebView加载HTML

UIWebView提供了三个方法来加载html资源

1. loadHTMLString:baseURL: 把html文件的内容以字符串的形式加载到webView里面，然后解析。编码为UTF8

NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURL *baseURL = [[NSBundle mainBundle] bundleURL];
[self.webView loadHTMLString:[NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil] baseURL:baseURL];

2. loadData:MIMEType:textEncodingName:baseURL: 把html文件的内容以二进制的形式加载到webView里面，然后解析。MIMETYPE指定html文件的格式为"text/html"，编码为UTF8

NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURL *baseURL = [[NSBundle mainBundle] bundleURL];
NSData *data = [NSData dataWithContentsOfFile:filePath];
[self.webView loadData:data MIMEType:@"text/html" textEncodingName:@"UTF-8" baseURL:baseURL];

3. loadRequest:构造一个请求，webView以请求的形式加载本地html文件，然后解析。这种方式可以直接加载网络html

NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURL *url = [NSURL fileURLWithPath:filePath];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[self.webView loadRequest:request];

 

二、WebView加载image,css,js

1. 上面加载html方式中的前两种都指定了一个baseURL，那么这个baseURL是干什么的？

iOS程序在运行的时候会把程序用到的资源文件copy到Bundle中，baseURL指定的目录就是Bundle的根目录

所以image,css,js资源，不管在项目里面放在哪个目录结构下，在HTML内引用的时候，都是直接根目录的

书写资源路径的时候，按照相对路径来理解，html和image,css,js可以看做是在同一个目录下

2. Xcode之前版本可能会把css,js文件当做编译资源而不是Bundle资源，这时可能会出现css,js没有效果

我们在Xcode中Build Phases下可以看到资源文件的存放位置，跟本次内容关联最大的有两项：Compile Sources和Copy Bundle Resources

查看确保资源位置放置正确即可修复这类问题

参考资料(戳这里)：

>  http://www.shuizhongyueming.com/2014/01/06/load-local-image-js-css-file-to-webview-in-xcode/