随着js的不断火热，越来越多的html界面出现在app中，但是在实际应用中经常有需求希望html的某些交互交给iOS实现，或者是从h5传递数据到iOS，幸好Apple提供了javascriptcore框架解决了这些问题，以下以OC为例介绍两种方式：
方式一：block 方法植入
测试用的html：
<button onclick='iosCall(432432)'>tapToShowNumber>tapToShowNumber</button>
- (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 <JSExport>
JSExportAs(jump, -(void)jumpDetail:(NSString *)urlString);
@end
这样html里面调用的时候就可以这样：
<button onclick='iosObject.jump('https://baidu.com')'></button>
基本上html调用OC的过程就是这样啦
网友评论