JavaScript和OC交互图文详解

2017-07-19 本文已影响96人白石洲霍华德

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>

网上很多例子都是上述办法，但是当你界面需要再次刷新的时候

<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>

</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>

<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>

JavaScript和OC交互图文详解

猜你喜欢

热点阅读