前段时间公司的一个项目需要使用的到OC代码与js脚本的交互。对于入行不久的我，当时也是在博客里面爬文来解决。做下来之后把我自己通过实践和学习得来的东西整理一下，以便在这方面接触不多的人能够快速的掌握OC与js的交互。新手教程，大神勿喷，如有错误，多多指教。
好了前言已足，直接来干货。
开始。首先我们需要用到JavaScriptCore.framework库，所以我们需要在工程里面链接JavaScriptCore.framework库，这个我就不再赘述。
一、js脚本调OC的方法，可以将js代码的值传入OC，或者OC响应js代码的交互事件等等。
1.首先我们需要创建一份OC与js交互的协议。
#import//首先导入头文件
/**
*创建一个遵守了JSExport协议的协议
*/
@protocolTestJSObjectProtocol
/**
*通过js代码调用本方法，并且传入页面标题值，来修改当前页面的title
*
* @param pageTitle js需要传入的页面标题
*/
-(void)setPageTitle:(NSString*)pageTitle;
@end
2.通过以上代码，我们拟定了一份交互协议，并且申明了一个方法，方法作用为通过js脚本来修改我们的页面标题。然后我们需要创建一个类来准守这份协议，并且实现它的方法。
@interfaceWebViewBridgeTool :NSObject
@end
@implementationWebViewBridgeTool
//实现我们拟定的协议的方法
#pragma mark -
/**
*我们在这里实现协议里面的方法
*
* @param pageTitle pageTitle是js脚本调用这个方法的时候传入的值，我们拿到这个值之后，就可以想做什么就做什么了
*/
-(void)setPageTitle:(NSString*)pageTitle{
NSLog(@"我们想要设置的页面标题为:%@",pageTitle);
}
@end
3.到这一步，我们需要的东西已经具备了，剩下的就是如何在js代码里面去调用setPageTitle这个方法了。接下来我们创建一个ViewController添加一个WebView来实现。
#import"WebViewBridgeTool.h"//导入头文件
@interfacePublicWebViewController :UIViewController
@property(nonatomic,strong)WebViewBridgeTool* app;// 我们需要将这个对象传入我们的js代码中
@property(nonatomic,strong)UIWebView* webView;//
@end
@implementationPublicWebViewController
-(void)viewDidLoad{
[superviewDidLoad];
//初始化需要写入js代码的对象
_app=[[WebViewBridgeToolalloc]init];
//假设我们已经初始化好了webview，并且将webview的delegate设置为self
[self.viewaddSubview:self.webView];
}
#pragma mark -
/**
*这个方式是webview的代理方式，根据名字我们知道这个方法在webview开始加载界面的时候调用，我们在网页开始加载的时候将我们的 * 交互对象通过JSContext写入到我们的js脚本里面去
*
* @param webView
*/
-(void)webViewDidStartLoad:(UIWebView*)webView{
JSContext*context = [webViewvalueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"app"]=self.app;
}
//我在网页加载完成的时候又写入了一次
-(void)webViewDidFinishLoad:(UIWebView*)webView{
JSContext*context = [webViewvalueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"app"]=self.app;
}
4.通过以上操作，我们在webview加载网页的时候，把app这个对象写入了js脚本中，我们的webview里面加载的网页上的js脚本里面就会有我们的app对象。在js脚本里面就可以通过app这个对象来调用我们oc的方法了。
app.setPageTitle("新标题");//js里面的代码
值得注意的是：我们协议里面的方法如果有多个参数，除了第一个参数，后面的参数不能有参数名字,需要省略参数名字，只有一个':'，否则，js无法调用。因为参数的名字也是方法名字的一部分。
-(void)showImageWithImageKeys:(NSString*)keyArrayJson :(NSInteger)index;//显示一组图片
-(void)showImageWithImageKeys:(NSString*)keyArrayJson index:(NSInteger)index;//不能这样写，第二个参数不应该有名字
二、OC调用js的方法，这个就相对简单。例如js里面有一个commit方法，我们可以通过名字来匹配到这个方法。
[self.webViewstringByEvaluatingJavaScriptFromString:[NSStringstringWithFormat:@"commit()"]];
如果需要传入参数，例如js里面有一个求和函数sum(a,b),我们只需要通过字符串拼接的方式将参数传入即可。
[self.webViewstringByEvaluatingJavaScriptFromString:[NSStringstringWithFormat:@"sum(%d,%d)",10,5]];
以上就是简单的OC与js交互的代码，虽然有成熟框架如WebViewJavascriptBridge，但是如果你只需要最简单的交互，这种方式，也许会来的更快。
网友评论