UIWebView——连接iOS和html的桥梁

随着js的不断火热,越来越多的html界面出现在app中,但是在实际应用中经常有需求希望html的某些交互交给iOS实现,或者是从h5传递数据到iOS,幸好Apple提供了javascriptcore框架解决了这些问题,以下以OC为例介绍两种方式:

方式一:block 方法植入
测试用的html:


- (void)webViewDidFinishLoad:(UIWebView*)webView {
//防止多次加载
if(webView.loading) {
return;
}

JSContext*context= [self.webViewvalueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

__weaktypeof(self) weakSelf =self;
context[@"iosCall"] = ^(NSString*number){
__strongtypeof(weakSelf) strongSelf = weakSelf;

UIAlertController*alertVC = [UIAlertControlleralertControllerWithTitle:@"I got it"message:numberpreferredStyle:UIAlertControllerStyleAlert];
UIAlertAction*actionOK = [UIAlertAction actionWithTitle:@"OK"style:UIAlertActionStyleCancel handler:nil];
[alertVC addAction: actionOK];
[strongSelf presentViewController:alertVC animated:YES completion:nil];
};
}

使用block往html里面注入函数很简单吧,只需要函数名和参数个数对应上就可以了,self.context[@"iosCall"]相当于在JSContext中插入了一个key方便html调用,亲测成功地完成了html调用OC包括传值

方式二:JSExport 对象植入

block方法植入虽然简单明了,但是那是js的原型概念,对于一个iOS开发者,对象调用方法或许比较容易令人接受,废话不多说,直接上代码:

@protocoljsToCallOCProtocol
- (void)jumpDetail:(NSString*)urlString;
@end

@interfaceJavascriptInterface()
@end

@implementationJavascriptInterface
- (void)jumpDetail:(NSString*)urlString{
UINavigationController *nag = (UINavigationController*)[UIApplication sharedApplication].keyWindow.rootViewController;
if(nag) {
ViewController*webVC = [[ViewController alloc] init];
webVC.loadString= urlString;
dispatch_async(dispatch_get_main_queue(), ^{
[nag pushViewController:webVC animated:YES];
});
}
}
@end

webView 代理方法中:

- (void)webViewDidFinishLoad:(UIWebView*)webView {
//防止多次加载
if(webView.loading) {
return;
}
JSContext *context = [self.webViewvalueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
JavascriptInterface *object = [JavascriptInterface new];
context[@"iosObject"] = object;
}

完工,值得注意的是对于遵守了JSExport协议的对象,其对于UI的操作尽量加个主线程套外面,不然你会看到你的控制台会被刷爆,哈哈。对于第二种方式,苹果还提供了一个JSExportAs 宏


#define JSExportAs(PropertyName, Selector) \
    @optional Selector __JS_EXPORT_AS__##PropertyName:(id)argument; @required Selector

#endif

从中我们不难看出,这个宏是为了给方法一个别名,如上面的jumpDetail我们可以改成jump方法名来调用,不过值得注意的是,方法的参数必须保持一致,可以将之前的协议改成如下


@protocol jsToCallOCProtocol 

JSExportAs(jump, -(void)jumpDetail:(NSString *)urlString);

@end

这样html里面调用的时候就可以这样:


基本上html调用OC的过程就是这样啦

你可能感兴趣的:(UIWebView——连接iOS和html的桥梁)