OC/Swift与JavaScript交互—WKWebView高级使用

WKWebView对于HTML5的操作已经很方便了,但是还没有AndroidWebView那样简单。WebView能够直接注入JavaScript对象,交互过程中JavaJavaScript甚至可以直接调用对方的方法,不用拦截,不用分发,这样的JavaJavaScript的交互非常清晰明了。

iOS上还达不到这个的便捷。

iOS8.0以上的系统中,建议使用WKWebView,它的性能分析这里就不做对比了。使用WKWebView时,HTML5调用Native 的过程是这样的:

 a1、Native提供基础设施:使用WKWebView的接口注册实现好的OC方法/Swift函数;
 a2、查看HTML5实现;
 a3、Native注入JavaScript函数;
 a4、Native实现桥接方法:通过系统方法拦截JavaScript事件,匹配OC/Swift注册列表,分发调用不同的原生方法。

同时,使用WKWebView时,OC/Swift调用JavaScript的过程是这样的:

 b1、使用WKWebView的接口调用JavaScript函数

</br>
这个交互能力已经从项目中抽取出来,做成了一个Demo,GitHub地址:https://github.com/xiaoL0204/WKWebViewDemo
Demo实现了交互、注入App信息、进度条等常用功能。
可以下载Demo,顺着以下思路,实现点击HTML5img标签打开一个Native图片浏览器的功能:

图片浏览器

</br>

a1、Native提供基础能力:

实现JavaScript函数对应的Swift方法:


//点击image
    func handlerClickImageTag(dic: Dictionary<String, Any>) {
        guard let currImgUrl = dic["oc_imgUrl"] as? NSString else {return}
        guard let imgBankArr = dic["oc_photoColl"] as? NSMutableArray else {return}
        
        var currImgInfo : WebPhotoImgInfo? = nil
        let urlBankArr = NSMutableArray()
        for i in 0 ..< imgBankArr.count  {
            let url = imgBankArr[i] as? NSString
            
            let tempInfo : WebPhotoImgInfo = WebPhotoImgInfo()
            tempInfo.imgUrl = url!
            if url == currImgUrl {
                currImgInfo = tempInfo
            }
            
            urlBankArr.add(tempInfo)
        }
        
        
        let vc : XLPhotoBrowserController = XLPhotoBrowserController()
        vc.delegate = self
        vc.setupUI(withCurrentImgAdapter: currImgInfo, imageAdaptersBank: NSArray(array:urlBankArr) as! [XLPhotoBrowserAdapterDelegate])
        navigationController?.pushViewController(vc, animated: true)
    }

这个Swift函数的功能是启动一个图片浏览器为了向图片浏览器传递参数,函数调用时需要携带特定格式的Dictionary对象,该函数内部会解析Dictionary对象key得到value,组装数据并push到一个新的Controller
这个Dictionary实际上是个Json对象,它的格式是定义在JavaScript中的。

a2、查看HTML5源码:

由于链接是微信公众号文章,页面的格式非常固定,只取img标签data-src属性即可。
例如

<p>![](http://upload-images.jianshu.io/upload_images/3076482-011b66de4fcbefb1?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</p>

a3、Native注入JavaScript函数:

func addAnalyzePhoto() {
        let string1 : String = "var oc_photoColl=new Array();var ps=document.getElementsByTagName('img');for(var i=0;i<ps.length;i++){var temp=ps[i].getAttribute('data-src');if(temp!=null){oc_photoColl.push(temp);ps[i].onclick=function(){var oc_imgUrl=this.getAttribute('data-src');window.webkit.messageHandlers.\(FuncClickPhoto).postMessage({oc_imgUrl,oc_photoColl});}}}"
        webView.configuration.userContentController.addUserScript(WKUserScript(source: string1, injectionTime: .atDocumentEnd, forMainFrameOnly: false))
        webView.configuration.userContentController.add(ScriptMessageHandler(handlerDelegate:self), name: FuncClickPhoto)
    }

注入一段特定的JavaScript代码,将当前点击的img标签data-src属性(即当前img标签的图片)、data-src数组取出放到一个JavaScript全局变量中。

这个Swift函数的调用时机是在WebView初始化以后。

a4、Native实现桥接方法:

func scriptHandlerUserController(_ userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) {        
        print("contentController:\(userContentController)  message.name:\(message.name)    message.body:\(message.body)")
        if message.name==FuncClickPhoto {
            if let dic = message.bodyas? Dictionary<String, Any> {                
               handlerClickImageTag(dic: dic)
            }
    }

这个方法中message.name区分Native注册好的方法,参数则存放在message.body属性。需要注意的是message.body是由JavaScript函数window.webkit.messageHandlers.\(FuncClickPhoto).postMessage({oc_imgUrl,oc_photoColl})传递的,它们是一一对应的关系。在这个方法中,我也打印了message.namemessage.body,用于验证它们的数据结构。

</br>

至此,完成了点击HTML标签调用OC方法/Swift函数,并传递HTML5页面元素的目的。

根据这个步骤来,即可轻松地实现JavaScript函数调用Native方法,无论是单纯的点击,还是从HTML5获取页面元素传递给Native,都能很方便地实现出来。

</br>

这里有3个优化点:

1.可以将Native基础设施封装起来,即a1步骤写到封装类中;
2.JavaScript注入函数也封装起来,即a3步骤
3.做一张路由表,实现快速匹配、快速分发,也为

func scriptHandlerUserController(_ userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage)函数减负。即a4步骤

至于OC/Swift执行JavaScript函数就更简单了,只需调用WKWebViewevaluateJavaScript接口。

推荐阅读更多精彩内容