WKWebView
如果是iOS 8及以上使用WKWebView加载网页。通过WKWebViewConfiguration添加JavaScript Message Handler的方式实现JavaScript调用原生方法。JavaScript可以给原生方法传递NSNumber, NSString, NSDate, NSArray,NSDictionary, NSNull类型的值。
比如：
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init];
[config.userContentController addScriptMessageHandler:self name:@"iOSInjection"];
myWKWebView = [[WKWebView alloc]initWithFrame:rect configuration:config];
接下来，在JavaScript的方法中调用window.webkit.messageHandlers.iOSInjection.postMessage([var1, var2]);方法，比如：
function wk_simpleCall() {
window.webkit.messageHandlers.iOSInjection.postMessage("No params method called");
}
function wk_complexCall(var1, var2) {
window.webkit.messageHandlers.iOSInjection.postMessage([var1, var2]);
}
注意这里的iOSInjection需要和前端约定好。
JavaScript抛出消息后，再接下来在原生代码的回调方法里就可以接收到消息，可以在回调方法中根据消息类型判断作何操作。
#pragma mark---WKScriptMessageHandler
//收到js注入回调
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
//此处的message.name为iOSInjection message.body中体现js传过来的值
NSLog(@"收到js注入 message.ame=%@ message.body=%@",message.name,message.body);
}
不能通过Block的方式实现JavaScript调用原生方法，因为拿不到WKWebView的JS上下文。
UIWebView
如果是iOS 7及以下使用UIWebView加载网页。有两种方式实现JavaScript调用原生方法。一种是Block方式，一种是利用JSExport，但都必须在webViewDidFinishLoad:回调方法中设置相关Block和JSExport才行。
- Block方式实现JavaScript调用原生方法
在webViewDidFinishLoad:回调方法中通过拿到JavaScript上下文，然后注入相关Block即可，相当于在JavaScript上下文环境中新增一个对象，那么JavaScript端就可以直接使用这个对象了。
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
//UIWebView需要使用这种方式获取JS上下文，WKWebView无法拿到！
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//这里需要避免循环引用
//创建函数
context[@"callOcMethod"] = ^(){
NSArray *args = [JSContext currentArguments];
NSLog(@"args=%@", args);
};
}
上面的代码执行完，JavaScript端就可以像这样用callOcMethod这个对象了：
function ui_simpleCall() {
callOcMethod();
}
function ui_complexCall(var1, var2) {
callOcMethod({"var1": var1, "var2": var2});
}
- JSExport方式实现JavaScript调用原生方法
JSExport：用来将原生方法输出给JavaScript。其本身并没有任何属性或方法，需要自己定义一个遵守JSExport的协议，然后在协议中声明方法，然后在webViewDidFinishLoad:回调方法中往JavaScript环境中输出一个遵守该协议的对象，最后JavaScript就可以通过这个对象来调用协议中声明的方法了。
第一步：定义协议
//需要自己定义一个遵守JSExport协议的协议
@protocol YLTestExport
//方式1、定义方法
-(void)log:(NSString *)string type:(NSInteger)type;
//方式2、JS调用logName('test', 123) 时，将自动调用logName:withType:回调方法
JSExportAs(logName, - (void)logName:(NSString *)name withType:(NSInteger)type);
@end
第二步：把一个遵守该协议的对象输出给JavaScript
这里我们将当前UIViewController设为遵守YLTestExport协议，并实现协议中定义的方法。
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
//方式2、JSExport方式
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"currentController"] = self;
}
第三步：JavaScript通过该对象调用协议中定义的方法
function ui_simpleExportCall() {
currentController.logName('Hello world!', 1024);//注意这里是logName方法，并不是logNameWithType方法
//或者
currentController.logType('Hello world!', 1024)
}
注意：在YLTestExport协议中声明方法时有两种方式：
一种是直接定义，像-(void)log:(NSString *)string type:(NSInteger)type这样，调用的时候冒号后面的首字母需要转为大写，比如这里就是logType。
另一种是通过JSExportAs这个宏定义来声明，第一个参数相当于给对应的方法取一个简称，这样在JavaScript调用该方法时就可以直接使用这个简称了。