JS和OC的交互这是个永恒话题，使用场景也是越来越多，如今一些reactnative、vue框架等，都是在重点结合原生与H5的混合使用。
那么，如何快捷方便的使用两者交互是一个很重要的关键点。
<h3>1.传统上的交互使用</h3>
<h4>JS调用OC</h4>
<pre>
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
NSString * str = request.URL.relativeString;
NSRange Sharerange = [requestString rangeOfString:@"dabaojian"];//快来大保健
// 找到了
if (range.location != NSNotFound) {
NSLog(@"我去大保健");
}
return YES;
}</pre>
webView拦截url链接，获取内容，再处理逻辑,实现以上webView的代理方法，当webView每次开始加载URL时会进入这个方法，我们便可以在这个方法实现JS调用OC。
<h4>OC调用JS</h4>
webView对象通过调用stringByEvaluatingJavaScriptFromString这个方法执行一段JS代码实现交互。
<pre>/OC调用JS
-(void)webViewDidFinishLoad:(UIWebView *)webView{
NSString * str = [self.webView stringByEvaluatingJavaScriptFromString:@"document.getElementById("""index-kw""").value="""li""""];
NSLog(@"webViewDidFinishLoad=%@",str);
}
</pre>
<h3>JavaScriptCore上的交互使用</h3>
<h4>OC调用JS</h4>
<pre>
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
//网页加载完成调用此方法
//首先创建JSContext 对象（此处通过当前webView的键获取到jscontext）
JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *alertJS=@"alert('test js OC')"; //准备执行的js代码
[context evaluateScript:alertJS];//通过oc方法调用js的alert
}
</pre>
JSContext是JavaScriptCore框架中的东西。JavaScriptCore是iOS7中新加入的框架，用来处理JavaScript
<h4>2.JSContext如何使用</h4>
<strong> JSContext: </strong>一个 Context 就是一个 JavaScript 代码执行的环境，也叫作用域
<strong> JSValue :</strong>S是弱类型的，ObjectiveC是强类型的，JSValue被引入处理这种类型差异，在Objective-C 对象和 JavaScript 对象之间起转换作用
<h4>JS调用OC</h4>
<pre>
-
(void)webViewDidFinishLoad:(UIWebView *)webView{
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"comeHere"] = ^() {
NSArray *Array= [JSContext currentArguments];
for (JSValue *jsVal in Array) {NSString *str= [NSString stringWithFormat:@"%@",jsVal]; if ([str isEqualToString:@"wanshangqubaojian" ] ) { NSLog(@"晚上去保健"); }else if ([str isEqualToString:@"wanshangyiqiqubaojian"]) { NSLog(@"晚上一起去保健"); } }};
}
</pre>
代码中@“comeHere”是你需要告诉js端的方法，这个方法就是让js来调用你block中的内容
<pre>@"wanshangqubaojian"</pre>
<pre>@"wanshangyiqiqubaojian"</pre>
这两个是js端需要告诉你的方法。
一旦此处代码执行完毕后，就好像是一直放了个context这个东西在这里，一旦你点击webView上A按钮，js就跑到你告诉他的方法里，即：comHere,然后代码就会执行block里的内容，接着走你写好的逻辑判断
<pre> if ([str isEqualToString:@"wanshangqubaojian" ] )</pre>
最后实现逻辑判断里方法
<h4>JSContext你应该要注意的一点</h4>
<strong>失效原因</strong>
网上很多例子都是上述办法，但是当你界面需要再次刷新的时候
<pre>[self.webView loadRequest:self.request];</pre>
这样会导致js代码重新注入，JSContext就会失效。
<strong>解决办法</strong>
这个时候你其实还需要一句代码，就是当你执行到
<pre>- (void)webViewDidFinishLoad:(UIWebView *)webView</pre>
这里的时候必须重新告诉js端，所以我们还需要一个方法，让js端知道我们走到了这个方法，让他再主动调用一次@“comeHere”。
我们可以随便定义这个方法的名字，让js端写好这个方法，等待我们调用。则最终的代码为
<pre>- (void)webViewDidFinishLoad:(UIWebView *)webView{
//此处写刚刚贴的JSContext代码
//加上这句
[webView stringByEvaluatingJavaScriptFromString:@"javaCallback()"];
}
</pre>
<h4>3.牛逼的第三方框架</h4>
<h3>GitHub地址:https://github.com/marcuswestin/WebViewJavascriptBridge</h3>
WebViewJavascriptBridge同时支持UIWeView和WKWebView，无论是JS调用OC还是OC调用JS，都可以正常传值和返回值；而且在页面加载时只要JS代码被运行就可以进行交互，上面遇到的缺点和坑在这里都被掩埋的，所以是现在处理交互的主流做法
<h4>js代码截取片段</h4>
这段代码是必须的，申明交互直接拷贝即可，处理交互部分，需要改动，关键就是和oc端协商的方法名，以及js内部需要的处理逻辑
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=720 target-densitydpi=360">
<title>测试</title>
<script type="text/javascript" charset="utf-8">
//oc调js
document.addEventListener('WebViewJavascriptBridgeReady',onBridgeReady, false);
function onBridgeReady(event){
bridge =event.bridge;
bridge.init(null);
bridge.registerHandler('jsFunc1', func1);
}
function func1 (data, callback){
alert("来自OC:" + data);
}
//js 调oc
function invokeOC(){
window.WebViewJavascriptBridge.callHandler("ocFunc1", "我是JS按钮触发", function(data, responseCallback){
alert("来自js的回复" + data);
});
}
</script>
</head>
<body>
<input type="button" id="su" value="调用OC" onClick="invokeOC()">
</body>
</html></pre>
<h4>JS 调用 OC</h4>
<pre> _bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
[_bridge setWebViewDelegate:self];
/*
含义：JS调用OC
@param registerHandler 要注册的事件名称(比如这里我们为loginAction)
@param handel 回调block函数 当后台触发这个事件的时候会执行block里面的代码
*/
[_bridge registerHandler:@"loginAction" handler:^(id data, WVJBResponseCallback responseCallback) {
// data js页面传过来的参数 假设这里是用户名和姓名，字典格式
NSLog(@"JS调用OC，并传值过来");
// 利用data参数处理自己的逻辑
NSDictionary *dict = (NSDictionary *)data;
NSString *str = [NSString stringWithFormat:@"用户名：%@ 姓名：%@",dict[@"userId"],dict[@"name"]];
[self renderButtons:str];
// responseCallback 给js的回复
responseCallback(@"报告，oc已收到js的请求");
}];
</pre>
<h4>OC 调用 JS</h4>
<pre>
/*
含义：OC调用JS
@param callHandler 商定的事件名称,用来调用网页里面相应的事件实现
@param data id类型,相当于我们函数中的参数,向网页传递函数执行需要的参数
注意，这里callHandler分3种，根据需不需要传参数和需不需要后台返回执行结果来决定用哪个
*/
//[_bridge callHandler:@"registerAction" data:@"我是oc请求js的参数"];
[_bridge callHandler:@"registerAction" data:@"uid:123 pwd:123" responseCallback:^(id responseData) {
NSLog(@"oc请求js后接受的回调结果：%@",responseData);
}];
</pre>
这里的关键点就是：OC和JS商定的方法名要统一，两端要合作一下。
<h4>Demo地址:https://github.com/jwh1650715313/WebDemo</h4>
网友评论