随着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. ClassLoader加载资源时的搜索路径

    先来个例子: /** * 测试classloader加载路径在哪里<p> * main3 */ public static void main3(String[] args) { Prop ...

  2. Spring静态注入的三种方式

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/chen1403876161/article/details/53644024Spring静态注入的三 ...

  3. 9.7 dubbo心跳机制

    dubbo的心跳机制: 目的:检测provider与consumer之间的connection连接是不是还连接着,如果连接断了,需要作出相应的处理. 原理: provider:dubbo的心跳默认是在 ...

  4. 学校公文办公处理系统_基于ASP.NET和Swfupload、FlashPaper2.2、校讯通短信发送的开发

    学校新来了一个主管教学的副校长,他对他以前工作学校的公文处理系统表示高度留念,于是乎叫我们也开发一个. 我就参考了那个学校的办公管理系统,发现其实功能也蛮简单的,就是一个文件上传下载的功能,选择用户组 ...

  5. killall 、kill 、pkill 命令详解 【转】

    之前常用地kill 命令就是 kill -9 XXid;kill -15 XXid;pkill 进程名: 今天发现killall也有适用场景,killall命令对杀死进程组(一个进程中有多线程的情况) ...

  6. 从HTML Components的衰落看Web Components的危机 HTML Components的一些特性 JavaScript什么叫端到端组件 自己对Polymer的意见

    http://blog.jobbole.com/77837/ 原文出处: 徐飞(@民工精髓V) 搞前端时间比较长的同学都会知道一个东西,那就是HTC(HTML Components),这个东西名字很现 ...

  7. 训练集测试集划分 train_test_split(X, y, stratify=y）

    from sklearn.model_selecting import train_test_spilt() 参数stratify: 依据标签y,按原数据y中各类比例,分配给train和test,使得 ...

  8. [转]Java 反射在实际开发中的应用

    一:Java类加载和初始化 1.1 类加载器(类加载的工具) 1.2 Java使用一个类所需的准备工作 二:Java中RTTI 2.1 :为什么要用到运行时类型信息(就是RTTI) 2.2  :RTT ...

  9. 使用Python解析JSON详解

    为大家介绍如何使用 Python 语言来编码和解码 JSON 对象. JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写. JSON 函数 ...

  10. 译: 2. RabbitMQ Spring AMQP 之 Work Queues

    在上一篇博文中,我们写了程序来发送和接受消息从一个队列中. 在这篇博文中我们将创建一个工作队列,用于在多个工作人员之间分配耗时的任务. Work Queues 工作队列(又称:任务队列)背后的主要思想 ...