iOS开发之iOS与js的交互

iOS中UIWebView与js的交互

• 1.什么是DOM？

  通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

  大家应该都学过DOM解析，我们来看一下XML DOM和HTML DOM的定义？

• XML DOM:定义了一套标准的针对 XML 文档的对象;

• HTML DOM:定义了一套标准的针对 HTML 文档的对象;

• 2.通过DOM访问HTML文档中的节点？

  可以通过getElementById() 和 getElementsByTagName() 这两种方法，可查找整个 HTML 文档中的任何 HTML 元素。

• 3.stringByEvaluatingJavaScriptFromString: 方法，可以实现webview强大的交互功能;

例如：

//在界面当中使用js代码实现插入一张图片    NSString *str4 =@"var img = document.createElement('img');"                         "img.src = 'img_01.jpg';"                         "img.width = '320';"                         "img.height = '180';"                         "document.body.appendChild(img);";//让webView去执行js代码操作   [webView stringByEvaluatingJavaScriptFromString:str4];

说明：经常遇到的一个问题，iOS中webView怎么样去截取加载的js中的button的点击事件，以及自定义按钮的点击事件？

• 4.使用UIWebView来加载网页时，怎么获取网页上这个按钮点击的事件？这个按钮本身就绑定了一个url,怎么让它点击之后当前的UIWebView不去加载这个url呢？是否能够换成我们想要跳转的界面，答案是肯定的！

  
  

  解决办法：UIWebView的协议里面有个方法叫- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType；可以获取它加载的网页上面的事件，比如单击了图片，单击了按钮等等。这个方法会在加载网页时执行，我们只需要在这个方法里，获取到js中的onclick点击事件的这个按钮，然后，阻止它去执行事件，然后，获取到js当中的按钮，重新添加一个我们自定义实现的事件即可！

代码如下：（不要忘了设置控制器为webView的代理,遵守协议UIWebViewDelegate）

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{//判断是否是单击,如果是webView上的单击事件，则返回NO，不去执行js点击事件    if (navigationType == UIWebViewNavigationTypeLinkClicked)    {        NSURL *url = [request URL];        if([[UIApplication sharedApplication]canOpenURL:url])        {            [[UIApplication sharedApplication]openURL:url];        }        return NO;    }    return YES;}

• 从iOS7开始 苹果公布了JavaScriptCore.framework 它使得JS与OC的交互更加方便了.首先，在Xcode工程中我们需要导入JavaScriptCore.framework框架；

(导入框架的步骤，此处我不详细介绍了)

• 选中JavaScriptCore.framework后 点击右下角Add 添加完成.

• 创建完成之后我们导入一下头文件,#import <JavaScriptCore/JavaScriptCore.h>

• 接着我们需要在网页加载完成的方法里，获取js中的按钮，并重新绑定事件即可；

//网页加载完成调用此方法- (void)webViewDidFinishLoad:(UIWebView *)webView  {        //首先创建JSContext 对象（此处通过当前webView的键获取到jscontext）      JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];      //省略号中是获取需要js当中需要操作的按钮，可以通过getElementById() 或者 getElementsByTagName() 获取js中的按钮对象，此处主要看你要获取哪个按钮对象，自己去查看html源码查找即可！    NSString *returnJS=@"alert('......')"; //准备执行的js代码      [context evaluateScript:returnJS];//通过oc方法调用js事件，执行按钮事件即可！     //如果你想在iOS工程中获取html里所有的内容，可以通过下面的方法获取    // 获取所有的网页内容    NSString *str = @"document.body.outerHTML";    NSString *html = [webView stringByEvaluatingJavaScriptFromString:str];    NSLog(@"%@", html);}  

• 如果为webView添加了delegate对象并实现该接口，那么在webView加载任何一个frame之前都会delegate对象的该方法，该方法的返回值用以控制是否允许加载目标链接页面的内容，返回YES将直接加载内容，NO则反之。并且UIWebViewNavigationType枚举，定义了页面中用户行为的分类，包括：

• 1.UIWebViewNavigationTypeLinkClicked，用户触击了一个链接。

• 2.UIWebViewNavigationTypeFormSubmitted，用户提交了一个表单。

• 3.UIWebViewNavigationTypeBackForward，用户触击前进或返回按钮。

• 4.UIWebViewNavigationTypeReload，用户触击重新加载的按钮。

• 5.UIWebViewNavigationTypeFormResubmitted，用户重复提交表单。

• 6.UIWebViewNavigationTypeOther，发生其它行为。

  缺点：iOS的UIWebView比较耗内存，加载几个网上的网页之后就爆内存警告了，不处理的话很容易被评估拒掉APP。

• 解决办法:iOS的webView有两个类，一个叫UIWebView，另一个是WKWebView。WKWebView就是为了取代UIWebView而出现的，在APP开发中，若不需要兼容iOS8之前版本，都应该使用WKWebView。WKWebView的确比UIWebView强大很多，与JS交互的能力显示增强，在加载速度上有所提升。

WKWebView的使用及js交互

WKWebView是苹果在iOS8之后引入的新组件，目的是给出一个新的高性能的WKWebView解决方案，摆脱过去WKWebView的老旧笨重特别是内存占用量巨大的问题，它使用Nitro JavaScript 引擎，这意味着所有浏览器运行JavaScript将会跟safari一样快！

WKWebView新特性

• 性能、稳定性、功能大幅度提升

• 允许JavaScript的Nitro库加载并使用（UIWebView中限制）

• 支持了更多的HTML5特性

  此处使用swift里面的API给大家讲解：（需要在使用的地方引入模块 import Webkit）

• 1).加载HTML的方式与UIWebView的方式大致相同。其中，loadFileURL方法通常用于加载服务器的HTML页面或者JS，而loadHTMLString方法通常用于加载本地HTML或者JS：

  方法如下：

  public func loadRequest(request: NSURLRequest) -> WKNavigation?// iOS 9.0以后才支持   @available(iOS 9.0, *)public func loadFileURL(URL: NSURL, allowingReadAccessToURL readAccessURL: NSURL) -> WKNavigation?// 通常用于加载本地HTML或者JSpublic func loadHTMLString(string: String, baseURL: NSURL?) -> WKNavigation?// iOS 9.0以后才支持@available(iOS 9.0, *)public func loadData(data: NSData, MIMEType: String, characterEncodingName: String, baseURL: NSURL) -> WKNavigation

• 2).与js交互用到的三个代理：

• WKNavigationDelegate，与页面导航加载相关;

• WKUIDelegate，与JS交互时的ui展示相关，比较JS的alert、confirm、prompt;

• WKScriptMessageHandler，与js交互相关，通常是ios端注入名称，js端通过window.webkit.messageHandlers.{NAME}.postMessage()来发消息到iOS端;

  (1).首先，我们在ViewController中先遵守协议：

  class ViewController: UIViewController, WKScriptMessageHandler, WKNavigationDelegate, WKUIDelegate

  (2).我们可以先创建一个WKWebView的配置项WKWebViewConfiguration，这可以设置偏好设置，与网页交互的配置，注入对象，注入js等：

  // 创建一个webiview的配置项let configuretion = WKWebViewConfiguration()// Webview的偏好设置configuretion.preferences = WKPreferences()configuretion.preferences.minimumFontSize = 10configuretion.preferences.javaScriptEnabled = true// 默认是不能通过JS自动打开窗口的，必须通过用户交互才能打开configuretion.preferences.javaScriptCanOpenWindowsAutomatically = false// 通过js与webview内容交互配置configuretion.userContentController = WKUserContentController()// 添加一个JS到HTML中，这样就可以直接在JS中调用我们添加的JS方法let script = WKUserScript(source: "function showAlert() { alert('在载入webview时通过Swift注入的JS方法'); }",injectionTime: .AtDocumentStart,// 在载入时就添加JSforMainFrameOnly: true) // 只添加到mainFrame中configuretion.userContentController.addUserScript(script)// 添加一个名称，就可以在JS通过这个名称发送消息：// window.webkit.messageHandlers.AppModel.postMessage({body: 'xxx'})configuretion.userContentController.addScriptMessageHandler(self, name: "AppModel")

  (3).创建对象并遵守代理：

  self.webView = WKWebView(frame: self.view.bounds, configuration: configuretion)self.webView.navigationDelegate = selfself.webView.UIDelegate = self

  (4).加载我们的本地HTML页面：

  let url = NSBundle.mainBundle().URLForResource("index", withExtension: "html")self.webView.loadRequest(NSURLRequest(URL: url!))self.view.addSubview(self.webView);

  (5).我们再添加前进、后退按钮和添加一个加载进度的控制显示在Webview上：

  self.progressView = UIProgressView(progressViewStyle: .Default)self.progressView.frame.size.width = self.view.frame.size.widthself.progressView.backgroundColor = UIColor.redColor()self.view.addSubview(self.progressView)self.navigationItem.leftBarButtonItem = UIBarButtonItem(title: "上一个界面", style: .Done, target: self, action: "previousPage")self.navigationItem.rightBarButtonItem = UIBarButtonItem(title: "下一个界面", style: .Done, target: self, action: "nextPage")

  (6).对于前进后退的事件处理就很简单的，要注意判断一下是否可以后退、前进才调用:

  func previousPage() {if self.webView.canGoBack {  self.webView.goBack()}}func nextPage() {if self.webView.canGoForward {  self.webView.goForward()}}

WKWebView的KVO

(1).对于WKWebView，有三个属性支持KVO，因此我们可以监听其值的变化，分别是：loading,title,estimatedProgress，对应功能表示为：是否正在加载中，页面的标题，页面内容加载的进度（值为0.0~1.0);

// 监听支持KVO的属性self.webView.addObserver(self, forKeyPath: "loading", options: .New, context: nil)self.webView.addObserver(self, forKeyPath: "title", options: .New, context: nil)self.webView.addObserver(self, forKeyPath: "estimatedProgress", options: .New, context: nil)

(2).然后就可以重写监听的方法来处理。这里只是取页面的标题，更新加载的进度条，在加载完成时，手动调用执行一个JS方法：

// MARK: - KVOoverride func observeValueForKeyPath(keyPath: String?, ofObject object: AnyObject?, change: [String : AnyObject]?, context: UnsafeMutablePointer<Void>) {  if keyPath == "loading" {    print("loading")  } else if keyPath == "title" {    self.title = self.webView.title  } else if keyPath == "estimatedProgress" {    print(webView.estimatedProgress)    self.progressView.setProgress(Float(webView.estimatedProgress), animated: true)  }  // 已经完成加载时，我们就可以做我们的事了  if !webView.loading {    // 手动调用JS代码    let js = "callJsAlert()";    self.webView.evaluateJavaScript(js) { (_, _) -> Void in      print("call js alert")    }    UIView.animateWithDuration(0.55, animations: { () -> Void in      self.progressView.alpha = 0.0;    })  }}

(3).我们看看WKUIDelegate的几个代理方法，虽然不是必须实现的，但是如果我们的页面中有调用了js的alert、confirm、prompt方法，我们应该实现下面这几个代理方法，然后在原来这里调用native的弹出窗，因为使用WKWebView后，HTML中的alert、confirm、prompt方法调用是不会再弹出窗口了，只是转化成ios的native回调代理方法：

// MARK: - WKUIDelegate// 这个方法是在HTML中调用了JS的alert()方法时，就会回调此API。// 注意，使用了`WKWebView`后，在JS端调用alert()就不会在HTML// 中显示弹出窗口。因此，我们需要在此处手动弹出ios系统的alert。func webView(webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: () -> Void) {  let alert = UIAlertController(title: "Tip", message: message, preferredStyle: .Alert)  alert.addAction(UIAlertAction(title: "Ok", style: .Default, handler: { (_) -> Void in    // We must call back js    completionHandler()  }))  self.presentViewController(alert, animated: true, completion: nil)}func webView(webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: (Bool) -> Void) {  let alert = UIAlertController(title: "Tip", message: message, preferredStyle: .Alert)  alert.addAction(UIAlertAction(title: "Ok", style: .Default, handler: { (_) -> Void in    // 点击完成后，可以做相应处理，最后再回调js端    completionHandler(true)  }))  alert.addAction(UIAlertAction(title: "Cancel", style: .Cancel, handler: { (_) -> Void in    // 点击取消后，可以做相应处理，最后再回调js端    completionHandler(false)  }))  self.presentViewController(alert, animated: true, completion: nil)}func webView(webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: (String?) -> Void) {  let alert = UIAlertController(title: prompt, message: defaultText, preferredStyle: .Alert)  alert.addTextFieldWithConfigurationHandler { (textField: UITextField) -> Void in    textField.textColor = UIColor.redColor()  }  alert.addAction(UIAlertAction(title: "Ok", style: .Default, handler: { (_) -> Void in     // 处理好之前，将值传到js端    completionHandler(alert.textFields![0].text!)  }))  self.presentViewController(alert, animated: true, completion: nil)}func webViewDidClose(webView: WKWebView) {  print(__FUNCTION__)}

苹果提供了更多简便的方式让native与js交互更加方便，通过让native注入名称，然后在js端自动转换成js的对象，就可以在js端通过对象的方式来发送消息到native端。如此一来，就简化了js与native的交互了!