UIWebView、WKWebView与JS的简单交互

现在的APP使用到HTML5与Native混合开发技术的越来越多，似乎HTML5真有取代Native的趋势，这也是目前移动开发的潮流吧。

iOS下的混合开发主要还是用UIWebView或者WKWebView，具体用到哪个取决于你的APP支持到的iOS版本，WKWebView是iOS8以后加入的，UIWebView可以追溯到苹果手机系统2.0时代了。

我是直接加载本地HTML文件的方式，下面简单记录一下。

1、将HTML文件导入到xcode

Create Groups 和 Create folder references 的区别就在于会不会被编译。

图片.png

注意选择 Create folder references

2、利用webView加载html文件

UIWebView/WKWebView：

- (void) loadLocalHtml:(NSString *)namePath{
    
    NSURL *filePath = [[NSBundle mainBundle] URLForResource:@"zhancheng/list.html" withExtension:nil];
    NSURLRequest *request = [NSURLRequest requestWithURL:filePath];
    [_webView loadRequest:request];
}

没啥好说的，直接加载urlRequest。
由于没有建组，没有经过编译，所以要找到这个文件就需要添加声明，"xxx/list.html"。
///

3、OC调用JS方法

两个webView没有区别，都可以这样写。

- (IBAction)showMore:(id)sender {
    
    NSMutableDictionary *dic = [NSMutableDictionary new];
    int x = arc4random()%1000;
    NSString *idstr = [NSString stringWithFormat:@"%d",x];
    
    [dic setObject:idstr forKey:@"id"];
    [dic setObject:@"imags/1.jpg" forKey:@"img_url"];
    [dic setObject:@"标题2211" forKey:@"title"];
    [dic setObject:@"内容内容内容内容内容内容" forKey:@"content"];
    
    NSData *jsonData = [NSJSONSerialization dataWithJSONObject:dic options:NSJSONWritingPrettyPrinted error:nil];
    NSString *jsonStr = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];
    NSString *jsStr = [NSString stringWithFormat:@"add_content('%@')",jsonStr];
    NSLog(@"%@",jsStr);
    NSString *jsRStr = [jsStr stringByReplacingOccurrencesOfString:@"\n" withString:@""];
    [_webView stringByEvaluatingJavaScriptFromString:jsRStr];
  
}

主要就是这句
[_webView stringByEvaluatingJavaScriptFromString:jsRStr];
注意JS方法名一定要完全一样，包括括号。如果参数是字符串还要注意加上单引号，其他类型不能加，否则JS不会执行。
另外一个有点拙计的问题是传入的参数格式也要完全一致，否则也是不会执行，上面的将换行"\n"删除才能拼接成JS可以接受的参数格式。

4、JS调用OC方法

这里就用到了alert方法调用iOS弹框

 function add_content(data_str){
            
            alert(data_str);
}

当然也可以利用alert传值给OC，自定义弹框风格

UIWebView：
需要自定义一个类别。UIWebView本身没有提供此方法，而在WKWebView中已经写在WKUIDelegate中
.h文件：

@interface UIWebView (JavaScriptAlert)  
-(void)webView:(UIWebView *)sender runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WebFrame *)frame;  
  
-(BOOL)webView:(UIWebView *)sender runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WebFrame *)frame;  
@end

.m文件：

@implementation UIWebView (JavaScriptAlert)  
  
static BOOL diagStat = NO;  
  
-(void)webView:(UIWebView *)sender runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WebFrame *)frame{  
    UIAlertView* dialogue = [[UIAlertView alloc]initWithTitle:nil message:message delegate:nil cancelButtonTitle:@"Okay" otherButtonTitles:nil, nil];  
    [dialogue show];  
    [dialogue autorelease];  
}  
  
-(BOOL)webView:(UIWebView *)sender runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WebFrame *)frame{  

    //message 就是JS要传的值
    UIAlertView* dialogue = [[UIAlertView alloc] initWithTitle:nil message:message delegate:self cancelButtonTitle:NSLocalizedString(@"Okay", @"Okay") otherButtonTitles:NSLocalizedString(@"Cancel", @"Cancel"), nil];  
    [dialogue show];  
    while (dialogue.hidden==NO && dialogue.superview!=nil) {  
        [[NSRunLoop mainRunLoop] runUntilDate:[NSDate dateWithTimeIntervalSinceNow:0.01f]];  
    }  
    [dialogue release];  
      
    return diagStat;  
}  
  
-(void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex{  
    if (buttonIndex==0) {  
        diagStat=YES;  
    }else if(buttonIndex==1){  
        diagStat=NO;  
    }  
}  
@end

WKWebView
直接一个代理方法就行了，要注意的是 completionHandler() 一定要有，否则直接崩溃
看了一下注释
@param completionHandler The completion handler to call after the alert panel has been dismissed
应该是不写上的话会导致循环引用吧。
也可以在completionHandler里对JS代码进行一些处理，例如可以返回NO或者YES，或者其他JS需要处理的值，比如输入框textInput用户输入的值。
下面是三个弹框中的alertPanel的代理

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
    completionHandler();
    NSLog(@"%@",message);
}