UIWebView和WKWebView的使用及js交互

時間 2019-11-11

標籤 uiwebview wkwebview 使用交互欄目 JavaScript 简体版

原文原文鏈接

UIWebView和WKWebView的使用及js交互

web頁面和app直接的交互是很常見的東西，以前嘗試過flex和js的相互調用以及android和js的相互調用，卻只有ios沒試過，聽說比較複雜。週末花了點時間研究了一下，確實和其餘的不太同樣，可是也不見覆雜。php

要知道的事情

ios的webview有2個類，一個叫UIWebView，另外一個是WKWebView。二者的基礎方法都差很少，本文重點是後者，他是取代UIWebView出現的，在app開發者若不須要兼容ios8以前版本，都應該使用WKWebVIew。css

WKWebView 是蘋果在 iOS 8 中引入的新組件，目的是給出一個新的高性能的 Web View 解決方案，擺脫過去 UIWebView 的老舊笨重特別是內存佔用量巨大的問題，它使用Nitro JavaScript引擎，這意味着全部第三方瀏覽器運行JavaScript將會跟safari同樣快.html

ios9默認是不容許加載http請求的，對於webview，加載http網頁也是不容許的。能夠經過修改info.plist取消http限制jquery

在項目中找到info.plist，源文件形式打開，添加下面內容android

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

dome截圖ios

大綱

UIWebView使用git

加載網頁或本地頁面github
app調js方法web
js調app方法json

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;