随着H5功能愈发的强大，没进行过混合开发的小伙们都不好意思说自己能够独立进行iOS的app开发，在iOS7操作系统下，常用的native，js交互框架有easy-js,WebViewJavascriptBridge,以及结合javaScriptCore的框架。

　　easy-js 很早的一个框架了，已经好几年没有人维护了，里面有很多隐藏很深的坑，新人如果没有用过的话，建议不要再用了。主要是js新建一个隐藏的iframe，通过拦截url的形式进行交互。

　　WebViewJavascriptBridge是网上很火的一个交互库，使用的人较多，但是对于js基础较弱的小伙伴来说，底层不是太好理解。底层和easy-js一样都是通过创新一个隐藏的iframe通过截取url来进行交互。缺点这里就暂时不说了，用的不多，体会不够深刻。嘿嘿。

　　javaScriptCore中JSExport进行交互，这种方式比较简单易懂，也是我个人比较推崇 的一种方式。如果app最低版本操作系统是iOS7的小伙伴，建议自己搜一下相关知识点哦。但是WKWebView不能够利用javaScriptCore交互，是不是很坑爹哦，呜呜。

   如何实现WKWebView与js交互

js发送消息给native的代理方法是：

  1. - (void)userContentController:(WKUserContentController *)userContentController
  2.       didReceiveScriptMessage:(WKScriptMessage *)message;

native调用js方法传递参数主要通过如下方法：

  1. [_webView evaluateJavaScript:jsString completionHandler:^(id _Nullable data, NSError * _Nullable error) {
  2.  
  3. }];

相信这两个方法大家在网上已经看到过很多遍了，貌似可以解决与js交互的问题，实则不然，这两个方法并没有真正的帮我们解决交互的问题。因为在js发送消息给native的时候，有时候需要通过回调来获取相应的信息，仅仅靠上面两个方法是没有办法满足的，也可能会有小伙伴说，先通过上面方法1发送消息个native然后，再使用方法2发送消息给js不就好了么，不行的，这样的话，js调用native方法时，和native发送消息时候并没有时间先后的约定，不能保证，js获取相关返回值的时候，一定能拿到值。 
   我一直在想如何能有一个与js调用native函数相关连的回调呢。功夫不负有心人，偶然看到H5 ，DOM可以绑定事件，后来想能不能绑定自定义事件呢，一搜果然可以，参考博客如下： 
http://www.zhangxinxu.com/wordpress/2012/04/js-dom自定义事件/ 
顺着这个思路，每一次js方法调用native方法的时候，我都为这个js方法绑定一个对应的callBack方法，这样的话，同时在发送的消息中告诉native需要回调，native方法就可以执行完相关的方法后，直接回调相应的 callBack方法，并携带相关的参数，这样就可以完美的进行交互了。

这里我主要写了一个JKEventHandler的js类，脚本内容如下：

  1. var JKEventHandler ={
  2.  
  3. callNativeFunction:function(functionString,params,callBack){
  4.  
  5.     var methodName = (functionString.replace(/function\s?/mi,"").split("("))[0];
  6.     var callBackName =methodName + 'CallBack';
  7.     var message;
  8.  
  9.     if(!callBack){
  10.  
  11.         message = {'methodName':methodName,'params':params};
  12.         window.webkit.messageHandlers.JKEventHandler.postMessage(message);
  13.  
  14.     }else{
  15.         message = {'methodName':methodName,'params':params,'callBackName':callBackName};
  16.         if(!Event._listeners[callBackName]){
  17.         Event.addEvent(callBackName, function(data){
  18.  
  19.                        callBack(data);
  20.  
  21.                        });
  22.         }
  23.         window.webkit.messageHandlers.JKEventHandler.postMessage(message);
  24.     }
  25.  
  26. },
  27.  
  28. callBack:function(callBackName,data){
  29.  
  30.     Event.fireEvent(callBackName,data);
  31.  
  32. },
  33.  
  34. removeAllCallBacks:function(data){
  35.     Event._listeners ={};
  36. }
  37.  
  38. };
  39.  
  40. var Event = {
  41.  
  42. _listeners: {},
  43.  
  44. addEvent: function(type, fn) {
  45.     if (typeof this._listeners[type] === "undefined") {
  46.         this._listeners[type] = [];
  47.     }
  48.     if (typeof fn === "function") {
  49.         this._listeners[type].push(fn);
  50.     }
  51.  
  52.     return this;
  53. },
  54.  
  55. fireEvent: function(type,param) {
  56.     var arrayEvent = this._listeners[type];
  57.     if (arrayEvent instanceof Array) {
  58.         for (var i=0, length=arrayEvent.length; i<length; i+=1) {
  59.             if (typeof arrayEvent[i] === "function") {
  60.                 arrayEvent[i](param);
  61.             }
  62.         }
  63.     }
  64.  
  65.     return this;
  66. },
  67.  
  68. removeEvent: function(type, fn) {
  69.     var arrayEvent = this._listeners[type];
  70.     if (typeof type === "string" && arrayEvent instanceof Array) {
  71.         if (typeof fn === "function") {
  72.             for (var i=0, length=arrayEvent.length; i<length; i+=1){
  73.                 if (arrayEvent[i] === fn){
  74.                     this._listeners[type].splice(i, 1);
  75.                     break;
  76.                 }
  77.             }
  78.         } else {
  79.             delete this._listeners[type];
  80.         }
  81.     }
  82.  
  83.     return this;
  84. }
  85. };

callNativeFunction: 这个函数主要是js调用native方法的时候进行调用的。如果有回调的话，需要在传入的参数中写出来哦。 
callBack:主要是用来触发对应js方法回调函数的。

removeAllCallBacks: 主要是在要销毁所有的callback事件时调用的。

下面是html 使用 这个js 类的 demo

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>iOS and Js</title>
  6.     <style type="text/css">
  7.       * {
  8.         font-size: 40px;
  9.       }
  10.     </style>
  11.   </head>
  12.  
  13.   <body>
  14.  
  15.     <div style="margin-top: 100px">
  16.       <h1 style="color: red;">教你如何用H5与OC进行交互,并且把H5输入的内容显示到当前的控制器上</h1><br/>
  17.       <div><input type="button" value="sendInfoToNative" onclick="sendInfoToNative()"></div>
  18.       <br/>
  19.       <div><input type="button"  value="getInfoFromNative" onclick="getInfoFromNative()"></div>
  20.       <br/>
  21.        <div><input type="button" value="cleanAllCallBacks" onclick="cleanAllCallBacks()"></div>
  22.        <br/>
  23.       <div><input type="button" value="点击触发JS方法(callJsConfirm)" onclick="callJsConfirm()"></div><br/>
  24.     </div>
  25.     <br/>
  26.     <div>
  27.       <div><input type="button" value="点击触发JS输入方法(callJsInput) " onclick="callJsInput()"></div><br/>
  28.     </div>
  29.  
  30.     <br/>
  31.     <div id="SwiftDiv">
  32.       <span id="jsParamFuncSpan" style="color: red; font-size: 50px;"></span>
  33.     </div>
  34.  
  35.     <script type="text/javascript">
  36.       function sendInfoToNative() {
  37.  
  38.         var params ={'Phone':'13566668888'};
  39.  
  40.        JKEventHandler.callNativeFunction(arguments.callee.toString(),params,null);
  41.  
  42.       }
  43.  
  44.     function getInfoFromNative(){
  45.  
  46.      var params = {'Phone':'13933333333'};
  47.      JKEventHandler.callNativeFunction(arguments.callee.toString(),params,function(data){
  48.                                       alert(data);
  49.                                       });
  50.  
  51.     }
  52.  
  53.     function callJsConfirm() {
  54.       if (confirm('confirm', 'Objective-C call js to show confirm')) {
  55.         document.getElementById('jsParamFuncSpan').innerHTML
  56.         = 'true';
  57.       } else {
  58.         document.getElementById('jsParamFuncSpan').innerHTML
  59.         = 'false';
  60.       }
  61.  
  62.     }
  63.  
  64.     function callJsInput() {
  65.       var response = prompt('Hello', '请输入你的名字:');
  66.       document.getElementById('jsParamFuncSpan').innerHTML = response;
  67.       alert (response);
  68.  
  69.     }
  70.  
  71.     function cleanAllCallBacks(){
  72.  
  73.     JKEventHandler.removeAllCallBacks();
  74.  
  75.     }
  76.       </script>
  77.   </body>
  78. </html>

在js中调用getInfoFromNative 这个方法既可以发送参数给native，同时也可以从native获取参数 
具体实现：

  1.  function getInfoFromNative(){
  2.  
  3.      var params = {'Phone':'13933333333'};
  4.                JKEventHandler.callNativeFunction(arguments.callee.toString(),params,function(data){
  5.                                       alert(data);
  6.       });
  7.  
  8.     }

OC里面JKEventHandler类 负责js掉用原生的回调  里面处理js 传过来的参数 然后判断掉用哪些方法 ，在

OC里面JKEventHandler+Demo.m  通过JKEventHandler用runtime处理 然后调用里面的方法

  1. - (void)getInfoFromNative:(id)params :(void(^)(id response))callBack{
  2.     NSLog(@"params %@",params);
  3.     NSString *str = @"'Hi Jack!'";
  4.     callBack(str);
  5.  
  6. }

就这样，我在native方法里可以获取到js传递来的参数，同时通过callBack我也可以传递参数给js。

另外呢在JKEventHandler文件里，我写了一个事件分发函数，主要就是为了解决多个js方法交互的问题。感兴趣的小伙伴可以看看我的demo哦。 
另外需要大家注意的是，WKWebView所在的ViewController即将被销毁的时候，也就是WKWebView即将被销毁的时候，一定要记得调用如下方法销毁所有的callback事件哦：

  1.  [_webView evaluateJavaScript:@"JKEventHandler.removeAllCallBacks();" completionHandler:^(id _Nullable data, NSError * _Nullable error) {
  2.  
  3.  }];//删除所有的回调事件

俗话说的话，代码就是程序员最好的老师，这里我就不多说了，Demo地址

也可以用pod 加入：

  1. pod "JKWKWebViewHandler"

iOS（WKWebView）OC与JS交互 之三的更多相关文章

  1. iOS WKWebView OC 与 JS 交互学习

    我写WKWebView 想让 服务端相应 一个 方法但是不响应,根据 UIWebView 用 JSContext就能拿到响应的处理经验是不是服务端 也需要 对 WKwebView有兼容的一个写法??? ...

  2. iOS（UIWebView 和WKWebView）OC与JS交互 之二

    在iOS应用的开发过程中,我们经常会使用到WebView,当我们对WebView进行操作的时候,有时会需要进行源生的操作.那么我记下来就与大家分享一下OC与JS交互. 首先先说第一种方法,并没有牵扯O ...

  3. OC与JS交互之WebViewJavascriptBridge

    上一篇文章介绍了通过UIWebView实现了OC与JS交互的可能性及实现的原理,并且简单的实现了一个小的示例DEMO,当然也有一部分遗留问题,使用原生实现过程比较繁琐,代码难以维护.这篇文章主要介绍下 ...

  4. OC与JS交互之UIWebView

    随着H5的强大,hybrid app已经成为当前互联网的大方向,单纯的native app和web app在某些方面显得就很劣势.关于H5的发展史,这里有一篇文章推荐给大家,今天我们来学习最基础的基于 ...

  5. OC与JS交互前言

    OC与JS交互过程中,可能会需要使用本地image资源及html,css,js文件,这些资源应该如何被加载? 一.WebView加载HTML UIWebView提供了三个方法来加载html资源 1.  ...

  6. OC和JS交互的三种方法

    看简书上说一共有六种OC和JS交互的方法,但是前三种原理都一致,都是通过检测.拦截Url地址实现互相调用的.剩下的react native等第三方框架原理不一样,也没有去研究,下边记录我使用的三种方法 ...

  7. Mac Webview OC与JS交互实现

    1.首先,需要定义一个JS可识别的变量(如external)用于OC与JS交互 - (void)webView:(WebView *)sender didClearWindowObject:(WebS ...

  8. OC与JS交互之WKWebView

    上一篇文章我们使用了JavaScriptCore框架重写了之前的示例,iOS8苹果偏爱HTML5,重构了UIWebVIew,给我们带来了WKWebView,使其性能.稳定性.功能大幅度提升,也更好的支 ...

  9. OC与JS交互之JavaScriptCore

    JavaScriptCore提供了JavaScript和Objective-C桥接的Obj-C API.JavaScriptCore提供了让我们脱离UIWebView执行JavaScript脚本的能力 ...

随机推荐

  1. 解决springboot druid 数据库批量更新错误问题

    原文:https://www.2cto.com/kf/201712/706399.html springboot druid 数据库多SQL错误multi-statement not allow Ca ...

  2. iOS开发-获取属性和方法

    iOS开发数据存储有两种方式,属性列表和对象编码,属性列表可以通过NSArray,NSMutableArray,NSMutableDictionary,存储对象我们可以通过归档和解档来完成.如果我们想 ...

  3. Tkinter(2.x 与3.X的区别)

    1.包的引入 2.X下是 from Tkinter import * 而3.x是 from tkinter import * 否则,会报找不到tkinter的错误 Traceback (most re ...

  4. CSS 布局整理

    1.css垂直水平居中 效果: HTML代码: <div id="container"> <div id="center-div">&l ...

  5. IDEA下使用Maven的test命令乱码

    IDEA下使用Maven的test命令乱码的时候,加上 -Dfile.encoding=GBK 就可以解决啦   如下图所示:   或者在Maven的pom.xml文件中增加: <propert ...

  6. ng-repeat不添加容器标签

    如UL中的循环, 我们不期望添加额外的div之类的容器标签, 使用ng-repeat-start和ng-repeat-end可以实现 <li class="item item-icon ...

  7. Gson解析第三方提供Json数据（天气预报，新闻等）

    之前都是自己写后台,自己的server提供数据给client. 近期在看第三方的数据接口,訪问其它站点提供的信息.比方.我们可能自己收集的数据相当有限.可是网上提供了非常多关于天气预报.新闻.星座运势 ...

  8. Gitbook 命令行工具

    1.Gitbook 简介 1.1 Gitbook GitBook 是一个基于 Node.js 开发的命令行工具,使用它可以很方便的管理电子书,GitBook 是目前最流行的开源书籍写作方案. 使用 G ...

  9. easyui confirm提示框 调整显示位置

    方法一: $.messager.confirm("确认对话框","该客户已经存在!确定:查看该客户 ", function(r){ if(r){ alert(& ...

  10. python工具 - 从文件名读取特定信息到excel表格

    情景:文件名中包含学号和用户名,其中用户名在前学好在后,学号为2位,如harry33.txt.natasha12.txt. 要求:将多个文件名中的用户名与学号分开并保存到excle中. 代码部分: i ...