UIWebView与JavaScript的交互

整体概述：
      实质上oc与js的通讯交互就是发送消息，也即函数调用，只要在交互的过程正确的指定好对方须要调用的函数和参数就ok
      oc-->js  stringByEvaluatingJavaScriptFromString,其参数是一NSString 字符串内容是js代码（这又能够是一个js函数、一句js代码或他们的组合），当js函数有返回值或一句js代码有值返回可经过stringByEvaluatingJavaScriptFromString的返回值获取
    js-->oc 利用webView的重定向原理（即从新在js中指定document.location的值，此为一url），只要在这个url字符串中按自定义的规则指定好所需调用oc中的函数和参数，而后经过OC中的shouldStartLoadWithRequest函数去捕获处理请求，处理完最后，若是js还想获取一些返回参数的话，一样让oc去经过stringByEvaluatingJavaScriptFromString调用刚js传过来的回调js函数就行，顺道把参数也一块儿传了，完美！！！

UIWebView是IOS SDK中渲染网面的控件，在显示网页的时候，咱们能够hack网页而后显示想显示的内容。其中就要用到javascript的知识，而UIWebView与javascript交互的方法就是stringByEvaluatingJavaScriptFromString:

有了这个方法咱们能够经过objc调用javascript,能够注入javascript。

首先咱们来看一下，如何调用javascript:

1. [webView stringByEvaluatingJavaScriptFromString:@"myFunction();"];  

 

备注: stringByEvaluatingJavaScriptFromString这个方法有个地方须要注意, 算不上bug, 但确实有问题, 须要注意!

若是stringByEvaluatingJavaScriptFromString执行的是带参数的js函数, 这个参数里面若是带有(\r \n ')等等, js那边收不到这个值, 这些带\的须要转义, 以下这么写js才能收到完整的消息

message = [message stringByReplacingOccurrencesOfString:@"\n" withString:@"\\\\n"];

NSString *jsMethod  = [NSString stringWithFormat:@"JsMethod("%@")", message];

还有一个地方, 这2种写法看似同样, 实质不一样, 若是是采用'引号, 若是message带有', 消息则传不过去! 因此最好采用"

NSString *jsMethod  = [NSString stringWithFormat:@"JsMethod("%@")", message];

NSString *jsMethod  = [NSString stringWithFormat:@"JsMethod('%@')", message];

 这儿myFunction()就是咱们的javascript方法。

再来看看入何注入javascript,咱们先写一个须要注入的javascript:

1. function showAlert() {  
2.     alert('in show alert');  
3. }  

保存为test.js,而后拖到xcode 的resource分组下。再用代码在初始化的时候注入这个js（如在viewDidLoad方法里）。

1. NSString *filePath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"js"];  
2. NSString *jsString = [[NSString alloc] initWithContentsOfFile:filePath];  
3. [webView stringByEvaluatingJavaScriptFromString:jsString];  

这样就注入了上面的js，那么咱们能够随时调用js的方法，如何调用，上面有介绍。

 

那 么咱们能不能经过js来调用objc的方法呢。 固然能够，原理就是利用UIWebView重定向请求，利用shouldStartLoadWithRequest能够捕获到uiwebview的一切请求! 若是咱们在js里面发送一个特定的请求, 里面包含将要调用的oc函数和请求参数。

首先咱们写一个javascript 方法以下：

1. function sendCommand(cmd,param){  
2.     var url="testapp:"+cmd+":"+param;  
3.     document.location = url;  
4. }  
5. function clickLink(){  
6.     sendCommand("alert","你好吗？");  
7. } 

testapp是本身定义的一个协议, 只要不和http, https等国际通用协议头冲突均可以, 名字随便取;

cmd是要调用的oc的方法;

param是调用的参数

而后利用document.location来达到目的!  上面的"testapp://"+cmd+":"+param是自定义的一种请求格式, 这个格式你也能够变, 好比能够像下面这样

document.location="MyCustomProtocolName:functionName?param1=value1&param2=value2...".

js里面怎么定义均可以, 怎么方便怎么来!  不过在shouldStartLoadWithRequest方法里面捕获到了此次请求后, 你要对应的解析, 判断是否是本身特定的请求!

而后在你的html里调用这个js方法 如：

1. "button" value="Click me!" onclick="clickLink()" />
2. js文件里面 若是传出中文。要用到 js里面的 方法encodeURI 来处理一下。不然 xcode 中用 

   NSString* rurl=[[[request URL]  absoluteString]stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding ];  没法取得中文

    var url="protocol://"+encodeURI($("#textarea").val());

   
   url中含有中文，出现中文乱码(在oc代码中)
   //传输的时候这样写
     NSString *rateCardsName_CN=[[NSString stringWithFormat:@"%@",rateCardsName]stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
   //获取的时候这样写
   NSString *urlStr = [[request.URL absoluteString]stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding]; 

最后咱们在UIWebVew中截获这个重定向请求：

1. #pragma mark --  
2. #pragma mark UIWebViewDelegate  
3.   
4. - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {  
5.       
6.     NSString *requestString = [[[request URL]  absoluteString]stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding ]; 
   
7. if ([rurl hasPrefix:@"testapp://"]) {    
8.         //若是是本身定义的协议, 再截取协议中的方法和参数, 判断无误后在这里手动调用oc方法  
9.     } 
10.     return YES;  
11. }