JS与OC-WebView交互总结
2018-05-29 本文已影响45人
乔兰伊雪
OC与JS交互有两种方式，WKWebView和UIWebView,由于UIWebView比较耗内存，性能上不太好，所以苹果在iOS 8中推出了WKWebView。
一、与UIWebView交互
在UIWebView与JS交互中最简单的办法就是拦截URL，根据h5那边约定好的url来判断用户具体进行了什么操作。
代码如下：
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSURL *URL = request.URL;
NSString *scheme = [URL scheme];
//url可以是单纯字符串，也可以是带参数的url，这样就可以传值给oc，但是需要根据‘&’和‘=’将url拆分获得参数，再进行后续操作
if ([scheme isEqualToString:@"userLogin"]) {
//此处调用oc原生方法，比如字符串是用户登陆，那就掉用登陆方法
[self login：URL];
return NO;
}
return YES;
}
- (void)login:(NSURL *)URL
{
//拆分参数
NSArray *params =[URL.query componentsSeparatedByString:@"&"];
NSMutableDictionary *tempDic = [NSMutableDictionary dictionary];
for (NSString *paramStr in params) {
NSArray *dicArray = [paramStr componentsSeparatedByString:@"="];
if (dicArray.count > 1) {
NSString *decodeValue = [dicArray[1] stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
[tempDic setObject:decodeValue forKey:dicArray[0]];
}
}
// 登陆获取用户id
NSString *userId = [self getUserid];
// 传值给js, setUserId是跟js约定好的方法名
NSString *jsStr = [NSString stringWithFormat:@"setUserId('%@')",userId];
[self.webView stringByEvaluatingJavaScriptFromString:jsStr];
}
如果回调执行的JS 方法带参数，而参数不是字符串时，不要加单引号,否则可能导致调用JS 方法失败
参考：iOS下JS与OC互相调用（一）--UIWebView 拦截URL
二、与WKWebView交互
目前项目基本都支持ios8以上，建议使用WKWebView，性能更好
1、创建WKWebView
WKWebView有两个navigationDelegate和UIDelegate，拦截URL使用的是navigationDelegate中的代理
- (void)viewDidLoad {
[super viewDidLoad];
self.view .backgroundColor =[UIColor whiteColor];
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.preferences = [[WKPreferences alloc] init];
config.preferences.minimumFontSize = 10;
config.preferences.javaScriptEnabled = YES;
config.preferences.javaScriptCanOpenWindowsAutomatically = NO;
config.processPool = [[WKProcessPool alloc] init];
self.webView = [[WKWebView alloc] initWithFrame:self.view.bounds
configuration:config];
//记得实现对应协议,不然方法不会实现.
self.webView.UIDelegate = self;
self.webView.navigationDelegate =self;
[self.view addSubview:self.webView];
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://192.168.1.188/index1.html"]]];
}
2、拦截URL交互
用户进行操作后可以用下面方法拦截url来判断用户行为
#pragma mark - WKNavigationDelegate
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
NSURL *URL = navigationAction.request.URL;
NSString *scheme = [URL scheme];
if ([scheme isEqualToString:@"userLogin"]) {
//跟UIWebView那里一样
[self login:URL];
decisionHandler(WKNavigationActionPolicyCancel);
return;
}
decisionHandler(WKNavigationActionPolicyAllow);
}
调用js的方法变成了下面的方法,执行结果会在block中返回：
[self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
NSLog(@"%@----%@",result, error);
}];
3、注册方法与JS交互
如果有些参数需要一开始就从OC传值给JS,然后用户点击网页JS才能做出响应，这种情况可以有两种方式解决。
第一种是加载网页时将参数用&拼接起来直接传过去，比如签到页如果是网页，那JS就需要一开始就拿到用户ID来显示用户的签到情况。
第二种比如用户浏览web的商品详情页，当用户点击加入购物车时JS要根据用户登录状态判断是该登陆还是调用加入购物车的接口，那么在用户点击之前OC就需要将用户的登录状态告诉JS。
当然我们也可以将这个判断操作完全交给OC来做，只需要JS告诉OC用户是否点击了加入购物车按钮即可，但如果要交给JS来判断，就可以用下面的方法：
OC注册供JS调用的方法
config.userContentController = [[WKUserContentController alloc] init];
// **************** 此处划重点 **************** //
//添加注入js方法, oc与js端对应实现
[config.userContentController addScriptMessageHandler:self name:@"userLogin"];
加载成功,传递值给JS：
#pragma mark --------- WKNavigationDelegate --------------
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{
//获取userId
//传递userId给 js端
NSString * userId = [self getUserId];
if (!userId) {
userId =@"";
}
NSString * jsStr =[NSString stringWithFormat:@"sendKey('%@')", userId];
[self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
//此处可以打印error.
}];
//js端获取传递值代码实现实例参考
//function sendKey(user_id){
// $("#input").val(user_id);
// }
}
当用户点击加入购物车，JS根据传入的userid判断用户没登录，调用了前面OC注册的“ userLogin”来进行登录，结果会通过下面方法返回：
//获取注入方法名对象,获取js返回的状态值.
#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController
didReceiveScriptMessage:(WKScriptMessage *)message {
if ([message.name isEqualToString:@"userLogin"]) {
NSDictionary * messageDict = (NSDictionary *)message.body;
if ([messageDict[@"body"] isEqualToString:@"toLogin"]) {
NSLog(@"登录");
}else{
NSLog(@"正常跳转");
NSLog(@"mess --- id == %@",message.body);
}
}
}
JS在调用OC注册方法的时候要用下面的方式：
window.webkit.messageHandlers.<name>.postMessage(<messageBody>)
4、在交互中,关于alert (单对话框)函数、confirm(yes/no对话框)函数、prompt(输入型对话框)函数时,实现代理协议 WKUIDelegate ,则系统方法里有三个对应的协议方法.大家可以进入WKUIDelegate 协议类里面查看.下面具体协议方法实现,以供参考.
#pragma mark - WKUIDelegate
- (void)webViewDidClose:(WKWebView *)webView {
NSLog(@"%s", __FUNCTION__);
}
// 在JS端调用alert函数时，会触发此代理方法。
// JS端调用alert时所传的数据可以通过message拿到
// 在原生得到结果后，需要回调JS，是通过completionHandler回调
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {
NSLog(@"%s", __FUNCTION__);
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"alert" message:@"JS调用alert" preferredStyle:UIAlertControllerStyleAlert];
[alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler();
}]];
[self presentViewController:alert animated:YES completion:NULL];
NSLog(@"%@", message);
}
// JS端调用confirm函数时，会触发此方法
// 通过message可以拿到JS端所传的数据
// 在iOS端显示原生alert得到YES/NO后
// 通过completionHandler回调给JS端
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler {
NSLog(@"%s", __FUNCTION__);
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"confirm" message:@"JS调用confirm" preferredStyle:UIAlertControllerStyleAlert];
[alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler(YES);
}]];
[alert addAction:[UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
completionHandler(NO);
}]];
[self presentViewController:alert animated:YES completion:NULL];
NSLog(@"%@", message);
}
// JS端调用prompt函数时，会触发此方法
// 要求输入一段文本
// 在原生输入得到文本内容后，通过completionHandler回调给JS
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler {
NSLog(@"%s", __FUNCTION__);
NSLog(@"%@", prompt);
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"textinput" message:@"JS调用输入框" preferredStyle:UIAlertControllerStyleAlert];
[alert addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
textField.textColor = [UIColor redColor];
}];
[alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler([[alert.textFields lastObject] text]);
}]];
[self presentViewController:alert animated:YES completion:NULL];
}
