iOS WKWebview与js前端交互解决方案（与Android统一）

网上已经有很多关于WKWebview和前端互相调用的文章，对于这个ios8新出的WKWebview相信大家也并不陌生了，但是可能还有些小伙伴因为从UIWebview转到WKWebview，前端代码需要更新适配而头疼，或者前端需要判断Android和iOS来调整代码而头疼，那么这里会有一个解决方案。

GitHub - Juefeiye/JFWebViewController: WKWebview前端交互解决方案

假设你和前端定义的对象名叫:kf（当然这个自行定义）

熟悉WKWebview的都知道，官方提供的前端调用代码是这样的：window.webkit.messageHandlers.kf.postMessage({body:'hello world!'});

然鹅这个代码并不适用UIWebview和Android，所以前端如果要适配WKWebview的这种代码就需要做一些逻辑处理，那么这个成本是不是变高了呢？可否前端可以不做处理，直接有一套代码就能解决这些问题？这就是JFWebViewController解决的问题了！

在WKWebview以前,前端调用UIWebview或者Android的toast方法调用代码是这样的：kf.toast()

那么把这个调用方式和WKWebview的调用方式整合成一套就OK了！

首先 那么我们需要一个脚本将kf.toast()转换成window.webkit.messageHandlers.kf.postMessage({body:'xxx'}) 

还有些需要回调的我们不要忽视

写好转换脚本之后，我们将脚本插入到WKWebview中

到现在，前端调用kf.toast('xxx')就会被转换成window.webkit.messageHandlers.kf.postMessage({body:{

        "method": "toast",

        "params": "xxx"

    }

}) 

这个时候就可以在WKScriptMessageHandler获取到对应的body解析逻辑了

调用到客户端定义好的toast方法

这样前端只需要kf.functionName('params')就可以了，再也因为两端不同的调用方法而判断了。

iOS在定义方法的时候，需要先在脚本定义好所需的方法

因为我设计的是协议方式来实现这些方法，所以在JFWebViewProtocol也需要定义好方法，之后就可以享用了

如何获取原生返回值：

demo中的例子，先在ios_brige.js定义一个有回调的方法save，注意有回调的定义需要加入callBackName

js端获取返回值代码

    

客户端返回值代码

最后：这里是github地址，希望大家享用完给个star