最近一直在做有关Swift和JavaScript交互的程序,所以有关UIWebView和WKWebView在使用上的差别在此总结下:
UIWebView:
(1)创建
var webView: UIWebView! self.webView = UIWebView.init(frame: CGRect.init(x: 0, y: 0, width: kScreenWidth, height: kScreenHeight)) self.view.addSubview(self.webView!) self.webView.delegate = self
(2)请求
let url = "" let request = NSURLRequest(URL: NSURL(string: url)!) self.webView.loadRequest(request)
(3)常用代理
UIWebViewDelegate func webViewDidStartLoad(webView: UIWebView) { } func webView(webView: UIWebView, didFailLoadWithError error: NSError?) { } func webViewDidFinishLoad(webView: UIWebView) { }
UIWebView最屌的当然还是结合传说中的JavaScriptCore的Hybrid方式了
(4)在UIWebView中注入(执行)JS (注意要在webViewDidFinishLoad回调,也就是加载完后才能执行)
//第一种方法,直接webview执行(应该是封装了下面的方法二) let resultStr="1234" self.webView.stringByEvaluatingJavaScriptFromString("theFunc('"+resultStr+"');")! as String //第二种,使用kvc来取得mainframe的context,然后执行 let context = webView.valueForKeyPath("documentView.webView.mainFrame.javaScriptContext") as! JSContext context.evaluateScript(theScript)
(5)在UIWebView中监听JS的函数,这种方式可以通过原生return来call back,不过return是一种同步的call back。不是非常好。
let context = webView.valueForKeyPath("documentView.webView.mainFrame.javaScriptContext") as! JSContext //假如JS传给原生一个JSON的字符串 let accountSerial: @convention(block) String -> () = { _ in let value = JSContext.currentArguments().first let data = value?.toString().dataUsingEncoding(NSUTF8StringEncoding) let accountInfoDic = try? NSJSONSerialization.JSONObjectWithData(data!, options:[]) as! NSDictionary } context.setObject(unsafeBitCast(accountSerial, AnyObject.self), forKeyedSubscript: "saveAccountInfo") //假如需要原生return一个JSON的字符串 let cookiesSerial : @convention(block) () -> String = { let cookies = NSHTTPCookieStorage.sharedHTTPCookieStorage().cookiesForURL((webView.request?.URL)!) let header=NSHTTPCookie.requestHeaderFieldsWithCookies(cookies!) as NSDictionary if(header.objectForKey("Cookie") != nil) { return cookies.toJsonString() } }
(6)另外一种奇葩的通过URL拦截的方式,让JS调用原生
http://www.cnblogs.com/rayshen/p/4560728.html
WKWebView:
(1)创建,需要import的框架和继承的协议
//需要导入 import WebKit class MXWebDemoController:UIViewController,WKNavigationDelegate,WKUIDelegate,WKScriptMessageHandler{} private var webView:WKWebView! private var progressView:UIProgressView! //进度条 progressView = UIProgressView(progressViewStyle: UIProgressViewStyle.Default) progressView.frame = CGRectMake(0, 0, UIScreen.mainScreen().bounds.width, 22) progressView.tintColor = UIColor.blueColor() self.view.addSubview(progressView) //初始化 let conf = WKWebViewConfiguration() webView = WKWebView(frame: CGRectMake(0,0,kScreenWidth,kScreenHeight), configuration: conf) self.view.insertSubview(webView, belowSubview: progressView)
(2)请求
let request = NSURLRequest(URL: NSURL(string:baseUrl)!, cachePolicy: .ReloadIgnoringLocalCacheData, timeoutInterval: 10)
self.webView.loadRequest(request)
(3)常用代理
//webview加载完,重置进度条 func webView(webView: WKWebView, didFinishNavigation navigation: WKNavigation!) { progressView.setProgress(0.0, animated: false) } //kvo监听 override func observeValueForKeyPath(keyPath: String?, ofObject object: AnyObject?, change: [String : AnyObject]?, context: UnsafeMutablePointer<Void>) { if keyPath == "estimatedProgress" { progressView.hidden = webView.estimatedProgress == 1 progressView.setProgress(Float(webView.estimatedProgress), animated: true) } } //和JS消息交互 // MARK: - WKScriptMessageHandler func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) { if(message.name == "mxBack"){ self.navigationController?.popViewControllerAnimated(true) } }
(4)JS注入,最基本的就是evaluateJavaScript函数,在页面加载完后去执行。再而,WKWebView新增了JS注入的接口。
//方法1 let jsStr = "" webView.evaluateJavaScript(jsStr),completionHandler: { (object, error) in if(error != nil){ print(error) } }) //方法2 let script = WKUserScript(source:self.scriptStr,injectionTime: .AtDocumentStart,forMainFrameOnly: true)
(5)接受来自JS的消息
//1 conf.userContentController.addScriptMessageHandler(self, name:"mxBack") //2 func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) { weak var weakself = self if(message.name == "mxBack"){ self.hasGetResult = true self.gotoBack() } }
有关WKWebView,有个缺点,就是和JS之间没有同步的函数(依靠return来回传的方式)。
之前大部分iOS项目都是使用UIWebView,现在iOS8后Webkit良好的性能取代了UIWebView,但它的异步对很多旧的Web工程都有点影响。
别人的Demo:
https://github.com/CoderJackyHuang/WKWebViewTestDemo
下周有空我会写个更好的,更详细的介绍JS和原生之间的交互。