美文网首页iOS开发知识小集
iOS WKWebview与js前端交互解决方案(与Androi

iOS WKWebview与js前端交互解决方案(与Androi

作者: 绝非_ | 来源:发表于2018-10-08 17:26 被阅读82次

    网上已经有很多关于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也需要定义好方法,之后就可以享用了

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

    相关文章

      网友评论

        本文标题:iOS WKWebview与js前端交互解决方案(与Androi

        本文链接:https://www.haomeiwen.com/subject/ubieoftx.html