UIWebView和WKWebView的使用及js交互

UIWebView和WKWebView的使用及js交互

web页面和app直接的交互是很常见的东西，以前尝试过flex和js的相互调用以及android和js的相互调用，却只有ios没试过，听说比较复杂。周末花了点时间研究了一下，确实和其余的不太同样，可是 也不见复杂。

要知道的事情

ios的webview有2个类，一个叫UIWebView，另外一个是WKWebView。二者的基础方法都差很少，本文重点是后者，他是取代UIWebView出现的，在app开发者若不须要兼容ios8以前版本，都应该使用WKWebVIew。

WKWebView 是苹果在 iOS 8 中引入的新组件，目的是给出一个新的高性能的 Web View 解决方案，摆脱过去 UIWebView 的老旧笨重特别是内存占用量巨大的问题，它使用Nitro JavaScript引擎，这意味着全部第三方浏览器运行JavaScript将会跟safari同样快.

ios9默认是不容许加载http请求的，对于webview，加载http网页也是不容许的。能够经过修改info.plist取消http限制

在项目中找到info.plist，源文件形式打开，添加下面内容

    <key>NSAppTransportSecurity</key>     <dict>         <key>NSAllowsArbitraryLoads</key>         <true/>     </dict>

dome截图

大纲

• UIWebView使用

• 加载网页或本地页面

• app调js方法

• js调app方法

• WKWebView的使用

• 加载页面，前进，后退，刷新，进度条

• 前进，后退，刷新，进度条

• js中alert的拦截

• app调js方法

• js调app方法

• webView生命周期和跳转代理

• web页面

• 文章demo

• 参考文章

UIWebView使用

---

UIVebView如今已经弃用，ios8以上都应该用新的WKWebview，因此UIWebView我就随意说说，你们随意看看。

加载网页或本地页面

    //从本地加载html     let path:String! = NSBundle.mainBundle().pathForResource("index", ofType: "html")     webView.loadRequest(NSURLRequest(URL: NSURL.fileURLWithPath(path)))     //从网络加载     webView.loadRequest(NSURLRequest(URL: NSURL(string: "https://www.bing.com")!))

注意点: 1. ios9默认不能加载http请求，须要声明 2. uiwebView网络请求会进入ternal func webView(webView: UIWebView, shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool 委托，委托中若return false，也不会继续加载

app调js方法

app调用js方法使用的是 webView.stringByEvaluatingJavaScriptFromString() 这个方法。它能够直接执行一段js代码

    //调用js无参数的方法      webView.stringByEvaluatingJavaScriptFromString("hi()")     //调用js有参数的方法hello(msg)     let js = String(format: "hello('%@')", "liuyanwei")     webView.stringByEvaluatingJavaScriptFromString(js)     //调用js的参数为json对象     let js = String(format: "hello(%@)", "{'obj':'liuyanwei'}")     webView.stringByEvaluatingJavaScriptFromString(js)      //从文件中加载一段js代码而后执行      do{          let jsString = try String(contentsOfFile: NSBundle.mainBundle().pathForResource("test", ofType: "js")!, encoding: NSUTF8StringEncoding)          self.webView.stringByEvaluatingJavaScriptFromString(jsString)      }      catch{}     //直接执行alert     webView.stringByEvaluatingJavaScriptFromString("alert('hi')")     //执行有返回值的js函数     NSLog("%@", webView.stringByEvaluatingJavaScriptFromString("getName()")!)

相关的js代码

var hi = function(){     alert("hello")     $(".info").html("hi"); } var hello = function(msg){     alert("hello " + msg)     if(msg.obj != undefined)         alert(msg.obj) } var getName = function(){     return "liuyanwei" }

js调app方法

不少人以为，为何UIWebView中，js调用app的方式怎么那么奇怪，其实应该这样说，UIWebView没有办法直接使用js调用app，可是能够经过拦截request的方式间接实现js调用app方法。

既然是拦截url，那你就能够任意方式去规定想要调用的url的路径和app中方法转换的方式。我这里使用协议和路径的方式，例如我拦截到的url是 "hello://hello_liuyanwei" ，我就把hello当作想调用的方法，路径当作参数。这种方式不必定好，可是使用起来仍是挺方便的。

js中调用app的方法以下：

//这段代码是原生js代码，在js中的做用是作页面跳转 //webView经过拦截url请求方式拦截到request，经过解析从而调用 ios hello方法，参数是hello_liuyanwei document.location = "hello://hello_liuyanwei";

    //webView 须要实现UIWebViewDelegate委托方法     // class ViewController: UIViewController,UIWebViewDelegate ....     // webView.delegate = self     func webView(webView: UIWebView, shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool{         //若是请求协议是hello 这里的hello来自js的调用，在js中设为 document.location = "hello://liuyanwei 你好";         //scheme：hello ，msg：liuyanwei 你好         //经过url拦截的方式，做为对ios原生方法的呼叫         if request.URL?.scheme == "hello"{             let method:String = request.URL?.scheme as String!             let sel =  Selector(method+":")             self.performSelector(sel, withObject:request.URL?.host)             request.URL?.path             //若是return true ，页面加载request，咱们只是当作协议使用因此不能页面跳转             return false         }         return true     }

最后说一下关于js调用app的返回值。app调js能够有返回值，可是js调app是经过间接的拦截request方式实现，它根本就不算方法调用，因此应该是不存在能够直接产生返回值的（若是不对欢迎指正）。固然若是须要app对js的调用有所响应，能够经过回叫函数的方式回应js。能够在调用app的时候增长一个js回叫函数名 app在处理完以后能够呼叫回叫函数并把须要的参数经过回叫函数的方式进行传递。

WKWebView的使用

---

WKWebVIew是UIWebView的代替品，新的WebKit框架把原来的功能拆分红许多小类。本例中主要用到了WKNavigationDelegate,WKUIDelegate,WKScriptMessageHandler三个委托和配置类WKWebViewConfiguration去实现webView的request控制，界面控制，js交互，alert重写等功能。 使用WKWebView须要引入#import <WebKit/WebKit.h>

加载页面，配置委托和手势等

    //加载页面     config = WKWebViewConfiguration()     //设置位置和委托     webView = WKWebView(frame: self.webWrap.frame, configuration: config)     webView.navigationDelegate = self     webView.UIDelegate = self     self.webWrap.addSubview(webView)     //加载网页     //webView.loadRequest(NSURLRequest(URL: NSURL(string: "https://www.bing.com")!))     //加载本地页面     webView.loadRequest(NSURLRequest(URL: NSURL.fileURLWithPath(NSBundle.mainBundle().pathForResource("index", ofType: "html")!)))     //容许手势，后退前进等操做      webView.allowsBackForwardNavigationGestures = true

前进，后退，刷新，进度条

//前进 webView.goBack() //后退 webView.goForward() //刷新 let request = NSURLRequest(URL:webView.URL!) webView.loadRequest(request) //监听是否能够前进后退，修改btn.enable属性 webView.addObserver(self, forKeyPath: "loading", options: .New, context: nil) //监听加载进度 webView.addObserver(self, forKeyPath: "estimatedProgress", options: .New, context: nil) //重写self的kvo方法 override func observeValueForKeyPath(keyPath: String?, ofObject object: AnyObject?, change: [String : AnyObject]?, context: UnsafeMutablePointer<Void>) {     if (keyPath == "loading") {         gobackBtn.enabled = webView.canGoBack         forwardBtn.enabled = webView.canGoForward     }     if (keyPath == "estimatedProgress") {         //progress是UIProgressView         progress.hidden = webView.estimatedProgress==1         progress.setProgress(Float(webView.estimatedProgress), animated: true)     } }

js中alert的拦截

在WKWebview中，js的alert是不会出现任何内容的，你必须重写WKUIDelegate委托的runJavaScriptAlertPanelWithMessage message方法，本身处理alert。相似的还有Confirm和prompt也和alert相似，这里我只以alert为例。

    //alert捕获     func webView(webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: () -> Void) {         //         completionHandler()         let alert = UIAlertController(title: "ios-alert", message: "\(message)", preferredStyle: .Alert)         alert.addAction(UIAlertAction(title: "ok", style: .Default, handler:nil))         alert.addAction(UIAlertAction(title: "cancel", style: .Cancel, handler: nil))         self.presentViewController(alert, animated: true, completion: nil)     }

app调js方法

WKWebView调用js方法和UIWebView相似，一个是evaluateJavaScript，一个是stringByEvaluatingJavaScriptFromString。获取返回值的方式不一样，WKWebView用的是回叫函数获取返回值

    //直接调用js     webView.evaluateJavaScript("hi()", completionHandler: nil)     //调用js带参数     webView.evaluateJavaScript("hello('liuyanwei')", completionHandler: nil)     //调用js获取返回值     webView.evaluateJavaScript("getName()") { (any,error) -> Void in         NSLog("%@", any as! String)     }

js调app方法

UIwebView没有js调app的方法，而在WKWebView中有了改进。具体步骤分为app注册handler，app处理handler委托，js调用三个步骤

1：注册handler须要在webView初始化以前，如示例，注册了一个webViewApp的handler

        config = WKWebViewConfiguration()          //注册js方法         config.userContentController.addScriptMessageHandler(self, name: "webViewApp")         webView = WKWebView(frame: self.webWrap.frame, configuration: config)

2：处理handler委托。ViewController实现WKScriptMessageHandler委托的func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage)方法

    //实现WKScriptMessageHandler委托      class ViewController：WKScriptMessageHandler      //实现js调用ios的handle委托      func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) {          //接受传过来的消息从而决定app调用的方法          let dict = message.body as! Dictionary<String,String>          let method:String = dict["method"]!          let param1:String = dict["param1"]!          if method=="hello"{              hello(param1)          }      }

3：js调用

经过 window.webkit.messageHandlers.webViewApp找到以前注册的handler对象，而后调用postMessage方法把数据传到app，app经过上一步的方法解析方法名和参数

        var message = {                         'method' : 'hello',                         'param1' : 'liuyanwei',                         };         window.webkit.messageHandlers.webViewApp.postMessage(message);

若是须要app对js的调用有所响应，能够经过回叫函数的方式回应js。能够在调用app的时候增长一个js回叫函数名 app在处理完以后能够呼叫回叫函数并把须要的参数经过回叫函数的方式进行传递

webView生命周期和跳转代理

该代理提供的方法，能够用来追踪加载过程（页面开始加载、加载完成、加载失败）、决定是否执行跳转

// 页面开始加载时调用 - (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation; // 当内容开始返回时调用 - (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation; // 页面加载完成以后调用 - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation; // 页面加载失败时调用 - (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation; // 接收到服务器跳转请求以后调用 - (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation; // 在收到响应后，决定是否跳转 - (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler; // 在发送请求以前，决定是否跳转 - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;

web页面

---

随便说两句web页面，demo中的web前段用了jquery去操做dom，btn是在js中添加的，btn的点击事件也在js中。另外随便写了几个css让页面稍微美观一些。web页面都在项目文件夹下的web文件夹中。你们其实也没必要看，由于调用的app的js代码在文中都有单独贴出。

参考文章

---

本文也只是用了一些基本的用法，你们想了解更多，能够看看下面的三篇文章作补充阅读。可是如今也没发现有把webView这块写的很全很详细的文章，从此要是看见我会继续补充在这里。

• WKWebView

• iOS 8 WebKit框架概览（上）译文

• iOS 8 WebKit框架概览（下）译文

demo

---

我博客中大部分示例代码都上传到了github，地址是：https://github.com/coolnameismy/demo，点击跳转代码下载地址

本文代码存放目录是ios-WebView,本demo没作界面自适应，为了保证效果请用iPhone6及以上模拟器打开

若是你们支持，请github上follow和star

dome截图