WKWebView和UIWebView加载本地html和JS交互各种坑解决办法

因为苹果的文件机制，所有的资源文件都相当于放在bundle的路径里，里面不分任何文件夹路径，所以我们在加载(js, css, png)等等的资源文件的时候，不应该加上任何文件名，所以最好是把所有有关html的文件都放在同一平级的文件夹

UIWebView

1.OC调JS

    /**     *  ocCalls:js的函数名     */    JSValue *value = self.jsContext[@"ocCalls"];    /**     *  @[@"参数"]:传给js端的参数     */    [value callWithArguments:@[@"参数"]];

2.JS调OC

JS调OC有好几种方法，这里我就只列举一种我个人常用的方法，这个可以写在加载之前就行

    // 获取js上下文    self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];    // 获取js对象，这样会强持有。。没释放对象，目前没解决(个人觉得用单例，这样起码不会一直创建对象，有哪个大神这个可以指教一下嘛0.0)    self.jsContext[@"obj"] = self.uihd;

self.uihd .h文件

// 个人觉得这两个协议还是分开好，虽然写在一次方便，看起来少，但我觉得逻辑上是比较混乱的// 这是传出去的协议@protocol UIHDelegate <NSObject>- (void)hdOne;- (void)hdTwo:(NSString *)name;- (void)hdThree:(NSString *)name age:(NSString *)age;@end// 这是遵守JS里方法的协议，必须得遵守JSExport协议@protocol JSDelegate <JSExport>// 这里的方法名称和html的函数名称必须相同，同时这个方法的返回值，html里面也能取的到，也相当于另一种传值- (NSString *)one;- (void)two:(NSString *)name;// 多参数写法一:注意，js那边的函数必须驼峰命名- (void)three:(NSString *)name age:(NSString *)age;// 多参数写法二:直接完全和js一样，但后面参数面前不能加名字//- (void)threeAge:(NSString *)name :(NSString *)age;@end// 遵守刚刚写的js协议，然后在.m实现，再通过另一个协议传出去@interface UIHD : NSObject <JSDelegate>@property (nonatomic, weak) id <UIHDelegate> delegate;

self.uihd .m文件

#pragma mark -- JSDelegate- (NSString *)one {    // 代理    if ([self.delegate respondsToSelector:@selector(hdOne)]) {        [self.delegate hdOne];    }    NSLog(@"one");    return @"one";}- (void)two:(NSString *)name {    if ([self.delegate respondsToSelector:@selector(hdTwo:)]) {        [self.delegate hdTwo:name];    }    NSLog(@"two %@", name);}- (void)three:(NSString *)name age:(NSString *)age {    if ([self.delegate respondsToSelector:@selector(hdThree:age:)]) {        [self.delegate hdThree:name age:age];    }    NSLog(@"three %@, %@", name, age);}

html代码

    // html代码 创建对象，让UIWebView在外面监听    var obj;    // 调用OC方法，并且获取方法返回值    var returnValue = obj.threeAge("老王", "18");

WKWebView

说到WKWebView就一把心酸泪了，最近公司突然说搞h5界面，并且得用性能比较好的，而且还是保持用原生，不用第三方的情况下。就这样，默默的跳进了这个坑里，特别我这边的前端当时还写错html代码，然后我一直以为是我的错~.~，好吧，吐槽到此为止，直接上代码

OC调用JS

    /** !!必须在加载完之后才能调用     *  调用的函数，传参数则自己拼接到 () 里面     */    NSString *js = @"tapBtnThree()";    [self.webView evaluateJavaScript:js completionHandler:^(id _Nullable object, NSError * _Nullable error) {        if (error) {            NSLog(@"error = %@", error);        }else {            NSLog(@"object = %@", object);        }    }];

JS给OC发送消息

        // configuration:WKWebViewConfiguration类，自己查这个是什么鬼        /** !!!注意，这个方法不要填self，连weakSelf都不行，不然会一直强持有，所以这里得重新建一个控制器，当然你也可以想一下其他办法         *  @prama Handler:回调人         *  @prama name:js方法名称         */        WKMD *delegate = [[WKMD alloc] init];        delegate.delegate = self;        /**         *  @prama Handler:代理         *  @prama name:JS发送消息的名字  JS发送消息格式: window.webkit.messageHandlers.hehe.postMessage(message)         */        [configuration.userContentController addScriptMessageHandler:delegate name:@"one"];

WKMD .h文件

@protocol WKMDDelegate <NSObject> // 通过代理传js发送的消息出去- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;@end@interface WKMD : NSObject <WKScriptMessageHandler>@property (nonatomic, weak) id <WKMDDelegate> delegate;@end

WKMD .m文件

#pragma mark -- WKScriptMessageHandler- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {    NSLog(@"WKMD调用代理");    if ([self.delegate respondsToSelector:@selector(userContentController:didReceiveScriptMessage:)]) {        [self.delegate userContentController:userContentController didReceiveScriptMessage:message];    }}

html代码

        // 这是html里面的代码        // 消息        var message = {            'method' : 'hello',            'param1' : 'liuyanwei',        };        // 发送消息 window.webkit.messageHandlers.约定好的消息名.postMessage(消息)        window.webkit.messageHandlers.three.postMessage(message);

WKWebView9.0版本以下加载本地html问题

- (void)loadWeb {    // 原理就是9.0以下，把文件移到临时文件夹        // 9.0以上    if ([[UIDevice currentDevice].systemVersion floatValue] >= 9.0) {        // 取本地html文件路径        NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];        if (path) {            // 获取本地html的url和资源的url(就是bundle的url)            [self.webView loadFileURL:[NSURL fileURLWithPath:path] allowingReadAccessToURL:[NSBundle mainBundle].resourceURL];        }            }else {        // 9.0以下                // 获取本地文件夹的路径(必须得是蓝色文件夹 Create folder references)        NSString *path = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"devyellow_8.0"];                if(path) {            NSURL *fileUrl = [NSURL fileURLWithPath:path];            // 把文件夹转到tmp目录            fileUrl = [self fileURLForBuggyWKWebView:fileUrl];            NSURL *realUrl = [NSURL fileURLWithPath:[fileUrl.path stringByAppendingString:@"/index.html"]];            NSURLRequest *request = [NSURLRequest requestWithURL:realUrl];                        [self.webView loadRequest:request];        }    }}// 9.0以下将文件夹copy到tmp目录- (NSURL *)fileURLForBuggyWKWebView:(NSURL *)fileURL {    NSError *error = nil;    if (!fileURL.fileURL || ![fileURL checkResourceIsReachableAndReturnError:&error]) {        return nil;    }        NSFileManager *fileManager = [NSFileManager defaultManager];    NSURL *temDirURL = [NSURL fileURLWithPath:NSTemporaryDirectory()];    [fileManager createDirectoryAtURL:temDirURL withIntermediateDirectories:YES attributes:nil error:&error];        NSURL *dstURL = [temDirURL URLByAppendingPathComponent:fileURL.lastPathComponent];        [fileManager removeItemAtURL:dstURL error:&error];    [fileManager copyItemAtURL:fileURL toURL:dstURL error:&error];        return dstURL;}

WKWebView这里还有个坑，当时还有个需求，就是本地的html加载的时候要从我这边获取值才能加载，WKWebView它又不能在加载的时候从我这边获取值，不像UIWebView能直接用一个对象调用OC方法，然后传一个返回值给html。经过各种姿势的查资料，终于想出了一个解决办法，就是加载之前，把要传的值，放到webView的缓存里，然后前端自己从缓存里取值加载！～不废话，直接上代码

        /** 其实这个格式和字典一样         *  key: 和前端约定好的key         *  value: 需要传的值         */        NSString *sipNum = [NSString stringWithFormat:@"localStorage.setItem(\"key\", '%@');", @"value"];        /** 添加脚本         *  param injectionTime:WKUserScriptInjectionTimeAtDocumentStart在加载之前注入         *  param forMainFrameOnly:是否主窗口(其实我也不清楚这个是啥)         */        WKUserScript *script = [[WKUserScript alloc] initWithSource:sipNum injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO];        [configuration.userContentController addUserScript:script];