UIWebView 与 JavaScript 的交互

---

iOS开发过程中经常会有需要显示复杂的图文混排页面的需求，相比于在本地使用CoreText等技术实现工程自身的排版引擎，更为简单的方式通常是在服务器端实现一个H5页面，本地使用UIWebView加载网页来实现显示复杂页面的需求；

使用UIWebView加载网页时，复杂页面上往往会遇到需要在本地监听点网页上的点击事件（如点击网页控件并在本地弹出一个“时间选取器”），同时可能需要将本地的处理结果通过JavaScript执行回传给网页（如选取完日期后希望将日期回传给网页进行显示）。这样的需求在原理上是通过UIWebView页面和JavaScript的通信实现的。

这篇文章记录在iOS开发中UIWebView页面和本地Objective_C语言通信的简单实现方式，在文章结尾会给出一个具体实现的小demo供参照；

本地如何响应UIWebView上的控件点击事件

UIWebView页面一般是JavaScript实现的，但是直接通过JavaScript调用Objective_C语言代码并没有现成的借口；好在实现这样的需求有其他的路径可走，UIWebView有一个代理方法可以截获所有网页内发起的网络请求，通过这个方法让你有机会确定是否是加载这个网络请求，还是抛弃这个网络请求去做些其他处理；

通过shouldStartLoadWithRequest代理方法可以截获所有的网络请求；UIWebView发起网络请求有很多办法，本质上网络请求在是通过页面上链接新的URL发起的，那么我们可以事先和服务器约定一些特殊的URL链接，在截获到这些约定好的URL链接时，不去执行网页的加载而是在本地实现需要的响应即可；

下面指出这个代理方法，并在方法体内给出使用说明

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    //在这里截获网络请求

    //通过以下代码在本地获取URL中带的参数
    NSString *urlStr = request.URL.absoluteString;

    // 特殊URL格式举例 kong://loadUrl/blog.csdn.net  
    //判断链接中的协议头,如果是neng://, 则进行相关操作
    if ([urlStr hasPrefix:@"kong://"]) {
        //这里进行本地响应，可以调用本地方法

        //此时需要在方法中返回去NO，表示不加载网页
        return NO;
    }

    return YES;
}

如何将本地的执行结果通过JavaScript代码回传给网页

Objective_c语言调用JavaScript语言代码，是通过- ( NSString )stringByEvaluatingJavaScriptFromString:(NSString )script; 方法实现的。该方法通过向UIWebView传递一段需要执行的JavaScript代码，最后在网页上获得执行结果；

下面的代码给出这个方法的调用方式：

//直接传递js代码做参数
[self.webView stringByEvaluatingJavaScriptFromString:@"document.title"];


//调用网页上的js函数，函数不带参数时
[self.webView stringByEvaluatingJavaScriptFromString:@"clickme()"];

//调用网页上的js函数，函数带参数时
[self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"getDateValue('%@', '%@');", urlStr, dateStr]];

其中clickme()和getDateValue('%@', '%@')都是网页上的JavaScript实现的方法; urlStr与dateStr为在本地需要回传的参数。

这里有一个实现以上Objective_C和JavaScript交互的demo可以提供简单的参照；

其实原生代码与网页代码互相调用，业界有一些开源的框架可以直接使用，例如WebViewJavaScriptBridge。

希望深入的可以看 Apache Cordova 开源框架的源码,Cordova 已经帮你做好了所有的网页和原生应用之间的桥接工作，你需要做的就是根据他的文档去写对应的网页代码和原生代码就行了，具体请参见官网