随着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. TXB0108 TXS0108E 8-Bit Bidirectional Voltage-Level Translator for Open-Drain and Push-Pull Applications

    TXS(开漏优化设计),如I2C TXB(上拉优化设计),如SPI TXS0108 has integrated pull-up resistors to save board space and c ...

  2. Drawing line on a click on ZedGraph Pane

    https://stackoverflow.com/questions/12422398/drawing-line-on-a-click-on-zedgraph-pane public Form1() ...

  3. .Net Core Base64加密解密

    一.Base64说明 1..Net Core中的Base64位加密解密和.Net Framework使用方式相同 2. Convert 类中提供了Base64位转码方法 Base64是网络上最常见的用 ...

  4. CentOS中环境变量和配置文件

    什么是环境变量 bash shell用一个叫做 环境变量(environment variable) 的特性来存储有关shell会话和工作环境的信息.即允许在内存中存储数据,使得在程序或shell中运 ...

  5. 【OpenCV】选择ROI区域 (转)

    问题描述:在测试目标跟踪算法时,需要选择不同区域作为目标,进行目标跟踪,测试目标跟踪的效果. 解决思路: 1.OpenCV中提供了鼠标交互控制,利用setMouseCallback()给固定的窗口设置 ...

  6. MFC总结之CListCtrl用法及技巧

    复制于:http://www.cnblogs.com/lidabo/archive/2012/08/23/2652796.html 1.基本操作 分别从下面四点来介绍CListCtrl的基本操作: ① ...

  7. 将iPhone5s中的相片批量下载到电脑中

    前言:目前我还在使用iPhone5s这款手机,不过由于自己的无知,在使用手机的过程中发现有些用户的体验不是很好,特别是将手机中的相片批量下载到电脑中这件小事,和Android系统相关的手机相比更不好玩 ...

  8. Chrome F12 温故而知新 ：因为重定向导致清空Network信息

    虽然我以前都是用Fiddler 4来作为解决方案.但实际上可以勾选 [Preserve log]来保存日志 这样就不担心因为页面重定向导致清空了日志了

  9. C++赋值兼容原则

    C++赋值兼容原则(派生类对象是基类对象,反之不成立) –基类指针强制转换成派生类指针 –派生类中重定义基类成员(同名覆盖) 假设, 一个基类 "普通人", 一个派生类 " ...

  10. pandas DataFrame.shift()函数

    pandas DataFrame.shift()函数可以把数据移动指定的位数 period参数指定移动的步幅,可以为正为负.axis指定移动的轴,1为行,0为列. eg: 有这样一个DataFrame ...