随着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. 10个提升MySQL性能的小技巧

    从工作量分析到索引的三条规则,这些专家见解肯定会让您的MySQL服务器尖叫. 在所有的关系数据库中,MySQL已经被证明了完全是一头野兽,只要通知停止运行就绝对不会让你多等一秒钟,使你的应用置于困境之 ...

  2. Win8下枚举任意进程的句柄表。。。(VB6 Code)

    添加一个Command1.一个List1,代码: Private Type PROCESS_HANDLE_TABLE_ENTRY_INFO HandleValue As Long HandleCoun ...

  3. 用.Net打造一个移动客户端（Android/IOS）的服务端框架NHM（四）——Android端Http访问类(转)

    本章目的 在上一章中,我们利用Hibernate Tools完成了Android Model层的建立,依赖Hibernate Tools的强大功能,自动生成了Model层.在本章,我们将继续我们的项目 ...

  4. 修改文件夹的protection level之后，哪个job会来执行re-stripe的操作呢？

    有下面的一些job可能参与其中的,他们的描述如下: AutoBalance,AutoBalanceLin - Balances free space in the cluster. The goal ...

  5. python3用BeautifulSoup用limit来获取指定数量的a标签

    # -*- coding:utf-8 -*- #python 2.7 #XiaoDeng #http://tieba.baidu.com/p/2460150866 #标签操作 from bs4 imp ...

  6. Swift 值类型和引用类型的内存管理

    1.内存分配 1.1 值类型的内存分配 在 Swift 中定长的值类型都是保存在栈上的,操作时不会涉及堆上的内存.变长的值类型(字符串.集合类型是可变长度的值类型)会分配堆内存. 这相当于一个 &qu ...

  7. Effective Java 第三版——50. 必要时进行防御性拷贝

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...

  8. phpmyadmin登录提示mysqli_real_connect(): (HY000/2002): No such file or directory和mysql8登录失败的问题

    网上的解决方法有很多,但都无法解决我的问题,最后在stackoverflow上找到解决方法,原文地址:https://stackoverflow.com/questions/41881123/mysq ...

  9. [svc]linux下网桥-docker网桥

    网桥和交换机 2口交换机=网桥 交换机: 工作在数据链路层,根据源mac学习(控制层),目的mac转发(数据层). linux的网卡 vmware workstation中的桥接 参考: http:/ ...

  10. 基于mindwave脑电波进行疲劳检测算法的设计(3)

    这一节我将讲解thinkgear.h 里面的函数和宏定义.这一些都可以在MindSet Development Tools\ThinkGear Communications Driver\docs\h ...