随着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的代理方法是：

- (void)userContentController:(WKUserContentController *)userContentController

      didReceiveScriptMessage:(WKScriptMessage *)message;

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

[_webView evaluateJavaScript:jsString completionHandler:^(id _Nullable data, NSError * _Nullable error) {

}];

相信这两个方法大家在网上已经看到过很多遍了，貌似可以解决与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类，脚本内容如下：

var JKEventHandler ={

callNativeFunction:function(functionString,params,callBack){

    var methodName = (functionString.replace(/function\s?/mi,"").split("("))[0];

    var callBackName =methodName + 'CallBack';

    var message;

    if(!callBack){

        message = {'methodName':methodName,'params':params};

        window.webkit.messageHandlers.JKEventHandler.postMessage(message);

    }else{

        message = {'methodName':methodName,'params':params,'callBackName':callBackName};

        if(!Event._listeners[callBackName]){

        Event.addEvent(callBackName, function(data){

                       callBack(data);

                       });

        }

        window.webkit.messageHandlers.JKEventHandler.postMessage(message);

    }

},

callBack:function(callBackName,data){

    Event.fireEvent(callBackName,data);

},

removeAllCallBacks:function(data){

    Event._listeners ={};

}

};

var Event = {

_listeners: {},

addEvent: function(type, fn) {

    if (typeof this._listeners[type] === "undefined") {

        this._listeners[type] = [];

    }

    if (typeof fn === "function") {

        this._listeners[type].push(fn);

    }

    return this;

},

fireEvent: function(type,param) {

    var arrayEvent = this._listeners[type];

    if (arrayEvent instanceof Array) {

        for (var i=0, length=arrayEvent.length; i<length; i+=1) {

            if (typeof arrayEvent[i] === "function") {

                arrayEvent[i](param);

            }

        }

    }

    return this;

},

removeEvent: function(type, fn) {

    var arrayEvent = this._listeners[type];

    if (typeof type === "string" && arrayEvent instanceof Array) {

        if (typeof fn === "function") {

            for (var i=0, length=arrayEvent.length; i<length; i+=1){

                if (arrayEvent[i] === fn){

                    this._listeners[type].splice(i, 1);

                    break;

                }

            }

        } else {

            delete this._listeners[type];

        }

    }

    return this;

}

};

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

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

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

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>iOS and Js</title>

    <style type="text/css">

      * {

        font-size: 40px;

      }

    </style>

  </head>

  <body>

    <div style="margin-top: 100px">

      <h1 style="color: red;">教你如何用H5与OC进行交互,并且把H5输入的内容显示到当前的控制器上</h1><br/>

      <div><input type="button" value="sendInfoToNative" onclick="sendInfoToNative()"></div>

      <br/>

      <div><input type="button"  value="getInfoFromNative" onclick="getInfoFromNative()"></div>

      <br/>

       <div><input type="button" value="cleanAllCallBacks" onclick="cleanAllCallBacks()"></div>

       <br/>

      <div><input type="button" value="点击触发JS方法(callJsConfirm)" onclick="callJsConfirm()"></div><br/>

    </div>

    <br/>

    <div>

      <div><input type="button" value="点击触发JS输入方法(callJsInput) " onclick="callJsInput()"></div><br/>

    </div>

    <br/>

    <div id="SwiftDiv">

      <span id="jsParamFuncSpan" style="color: red; font-size: 50px;"></span>

    </div>

    <script type="text/javascript">

      function sendInfoToNative() {

        var params ={'Phone':'13566668888'};

       JKEventHandler.callNativeFunction(arguments.callee.toString(),params,null);

      }

    function getInfoFromNative(){

     var params = {'Phone':'13933333333'};

     JKEventHandler.callNativeFunction(arguments.callee.toString(),params,function(data){

                                      alert(data);

                                      });

    }

    function callJsConfirm() {

      if (confirm('confirm', 'Objective-C call js to show confirm')) {

        document.getElementById('jsParamFuncSpan').innerHTML

        = 'true';

      } else {

        document.getElementById('jsParamFuncSpan').innerHTML

        = 'false';

      }

    }

    function callJsInput() {

      var response = prompt('Hello', '请输入你的名字:');

      document.getElementById('jsParamFuncSpan').innerHTML = response;

      alert (response);

    }

    function cleanAllCallBacks(){

    JKEventHandler.removeAllCallBacks();

    }

      </script>

  </body>

</html>

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

 function getInfoFromNative(){

     var params = {'Phone':'13933333333'};

               JKEventHandler.callNativeFunction(arguments.callee.toString(),params,function(data){

                                      alert(data);

      });

    }

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

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

- (void)getInfoFromNative:(id)params :(void(^)(id response))callBack{

    NSLog(@"params %@",params);

    NSString *str = @"'Hi Jack!'";

    callBack(str);

}

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

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

 [_webView evaluateJavaScript:@"JKEventHandler.removeAllCallBacks();" completionHandler:^(id _Nullable data, NSError * _Nullable error) {

 }];//删除所有的回调事件

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

也可以用pod 加入：

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. CNUTCon2017全球运维技术大会（持续更新中） - 斯达克学院 - 实战驱动的 IT 教育平台 - Powered By EduSoho

    CNUTCon2017全球运维技术大会(持续更新中) - 斯达克学院 - 实战驱动的 IT 教育平台 - Powered By EduSoho   https://new.stuq.org/cours ...

  2. GOCN每日新闻(2017-08-12)

    1.为什么我们从 Python 转向 Go 2.Go 实现常见数据结构 3.3年半,50万行 Go 代码 4.Go 游戏引擎 oka 5.Go 是隐藏学习曲线的语言

  3. Python:提取网页中的电子邮箱

    import requests, re #regex = r"([a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+)"#这个正则表达式过滤 ...

  4. 微软BI 之SSIS 系列 - 变量查询语句引起列输出顺序不一致的解决方法

    开篇介绍 这个问题来自于 天善BI社区,看了一下比较有意思,因为我自己认为在 SSIS中处理各种类型文件的经验还比较丰富(有一年的时间几乎所有ETL都跟文件相关),但是这个问题确实之前没有特别考虑过. ...

  5. Spark机器学习(11)：协同过滤算法

    协同过滤(Collaborative Filtering,CF)算法是一种常用的推荐算法,它的思想就是找出相似的用户或产品,向用户推荐相似的物品,或者把物品推荐给相似的用户.怎样评价用户对商品的偏好? ...

  6. 用MATLAB生成模糊控制离线查询表

    实时采样得到的数据经过模糊化处理后输入机器,通过查询模糊规则表便可得到应有的输出模糊量,从而避免了近似推理过程.实际应用中,特别是在控制系统较为简单而采用单片机控制时,常常采用这种查表法. 模糊控制表 ...

  7. dos 批量重命名 bat

    @echo off setlocal enabledelayedexpansion echo %var% set /a i = i + var for %%x in (*) do ( if not & ...

  8. Swift Assert 断言

    前言 对每次运行都会出现的错误通常不会过于苦恼,可以使用断点调试或者 try catch 之类的方式判断并修复它.但是一些偶发(甚至是无数次运行才会出现一次)的错误单靠断点之类的方式是很难排除掉的,为 ...

  9. sql随机查询数据语句(NewID(),Rnd,Rand(),random())

    SQL Server: 代码如下 复制代码 Select TOP N * From TABLE Order By NewID() NewID()函数将创建一个 uniqueidentifier 类型的 ...

  10. 一道简单的python面试题-购物车

    要求实现:1.程序开始运行时要求手动填入工资金额2.然后展示一份带有价格的商品列表3.选择某个商品,足够金额购买就添加到购物车,否则提示无法购买4.退出后列出购物车清单 #!/usr/bin/pyth ...