js与原生通讯机制

js与原生通讯在iOS6.0及以前，只能通过 UIWebView的UIWebViewDelegate协议

Objective-C

1	( BOOL ) webView : ( UIWebView * ) webView shouldStartLoadWithRequest : ( NSURLRequest * ) request navigationType : ( UIWebViewNavigationType ) navigationType

方法来做拦截，并在这个方法中，根据url来调用Objective-C方法

一.javascript调用Objective-C

方法1  直接改变当前页面的url 这种方法在电脑浏览器中会直接跳转,在手机中正常

javascript代码:

1 2 3 4 5 6 7 8 9 10 11

function callOC ( func , param ) {          var url = "myapp:" + "&func=" + func ;          for ( var i in param )          {              url = url + "&" + i + "=" + param [ i ] ;              //alert(i);              //alert(param[i]);          }          document . location = url ;          //document.location="myapp:func&param1=value1&param2=value2...". }

方法2 动态添加个iframe改变其地址 最后删除,这种方法不会使当前页面跳转 效果更佳

javascript代码:

1 2 3 4 5 6 7 8 9 10 11 12 13

function callOC2 ( func , param ) {          var iframe = document . createElement ( "iframe" ) ;          var url = "myapp:" + "&func=" + func ;          for ( var i in param )          {              url = url + "&" + i + "=" + param [ i ] ;          }          iframe . src = url ;          iframe . style . display = 'none' ;          document . body . appendChild ( iframe ) ;          iframe . parentNode . removeChild ( iFrame ) ;          iframe = null ; }

1 2 3 4

使用方法 <input type = "button" value = "传个字典" onclick = "callOC('testFunc',{'param1':76,'param2':155,'param3':76})" />   <input type = "button" value = "传个字典2" onclick = "callOC2('testFunc',{'param1':76,'param2':155,'param3':76})" />

Objective-C代码:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

- ( BOOL ) webView : ( UIWebView * ) webView shouldStartLoadWithRequest : ( NSURLRequest * ) request navigationType : ( UIWebViewNavigationType ) navigationType {        NSString *requestString = [ [ [ request URL ]   absoluteString ] stringByReplacingPercentEscapesUsingEncoding :NSUTF8StringEncoding ] ;           if ( [ requestString hasPrefix : @"myapp:" ] ) {          NSLog ( @"requestString:%@" , requestString ) ;          //如果是自己定义的协议, 再截取协议中的方法和参数, 判断无误后在这里手动调用oc方法          NSMutableDictionary *param = [ self queryStringToDictionary :requestString ] ;          NSLog ( @"get param:%@" , [ param description ] ) ;            NSString *func = [ param objectForKey : @"func" ] ;                   if ( [ func isEqualToString : @"callFunc" ] )          {              [ self testFunc : [ param objectForKey : @"first" ] withParam2 : [ param objectForKey : @"second" ]   andParam3 : [ param objectForKey : @"third" ] ] ;                       } /* * 方法的返回值是BOOL值。 * 返回YES：表示让浏览器执行默认操作，比如某个a链接跳转 * 返回NO：表示不执行浏览器的默认操作，这里因为通过url协议来判断js执行native的操作，肯定不是浏览器默认操作，故返回NO * */          return NO ;      }      return YES ; }

1 2 3 4 5 6 7 8 9

- ( NSMutableDictionary * ) queryStringToDictionary : ( NSString * ) string {      NSMutableArray *elements = ( NSMutableArray * ) [ string componentsSeparatedByString : @"&" ] ;      NSMutableDictionary *retval = [ NSMutableDictionary dictionaryWithCapacity : [ elements count ] ] ;      for ( NSString *e in elements ) {          NSArray *pair = [ e componentsSeparatedByString : @"=" ] ;          [ retval setObject : [ pair objectAtIndex : 1 ] ? : @"" forKey : [ pair objectAtIndex : 0 ] ? @ : "nokey" ] ;      }      return retval ; }

 

二.Objective-C调用javascript

1 2 3 4 5 6 7 8 9 10 11 12 13 14

//插入js 并且执行传值 - ( IBAction ) insertJSTouched : ( id ) sender {      NSString *insertString = [ NSString stringWithFormat :                                @"var script = document.createElement('script');"                                "script.type = 'text/javascript';"                                "script.text = \"function jsFunc() { "                                "var a=document.getElementsByTagName('body')[0];"                                "alert('%@');"                                "}\";"                                "document.getElementsByTagName('head')[0].appendChild(script);" , self . someString ] ;      NSLog ( @"insert string %@" , insertString ) ;      [ self . myWeb stringByEvaluatingJavaScriptFromString :insertString ] ;      [ self . myWeb stringByEvaluatingJavaScriptFromString : @"jsFunc();" ] ; }

1 2 3 4

//提交form表单 - ( IBAction ) submitTouched : ( id ) sender {      [ self . myWeb stringByEvaluatingJavaScriptFromString : @"document.forms[0].submit(); " ] ; }

1 2 3 4 5

//修改标签属性 - ( IBAction ) fontTouched : ( id ) sender {      NSString *tempString2 = [ NSString stringWithFormat : @"document.getElementsByTagName('p')[0].style.fontSize='%@';" , @"19px" ] ;      [ self . myWeb stringByEvaluatingJavaScriptFromString :tempString2 ] ; }

---

(PS)如果你想去掉webview弹出的alert 中的来自XXX网页

1 2 3 4 5

- ( void ) webViewDidFinishLoad : ( UIWebView * ) webView {      //重定义web的alert方法,捕获webview弹出的原生alert  可以修改标题和内容等等      [ webView stringByEvaluatingJavaScriptFromString : @"window.alert = function(message) { window.location = \"myapp:&func=alert&message=\" + message; }" ] ; }

1 2 3 4

if ( [ func isEqualToString : @"alert" ] ) {    [ self showMessage : @"来自网页的提示" message : [ param objectForKey : @"message" ] ] ;    }

 

Objective-C

1	( BOOL ) webView : ( UIWebView * ) webView shouldStartLoadWithRequest : ( NSURLRequest * ) request navigationType : ( UIWebViewNavigationType ) navigationType

方法来做拦截，并在这个方法中，根据url来调用Objective-C方法

但是iOS7之后, iOS 7 引入了 JavaScriptCore.framework库，它把 WebKit 的 JavaScript 引擎用 Objective-C 封装,让JavaScript与Objective-C之间的通信变的非常简单。首先导入JavaScriptCore.framework框架, 然后

JS端：

1	TXBB_IOS_SDK.callPay(charge,  this .success,  this .cancel);

OC端:

.h中引入头文件，并实现协议和对应的方法

.m中在webViewDidFinishLoad中给context赋值，并把self指针给TXBB_IOS_SDK,JS端即可经过TXBB_IOS_SDK.callPay调用起Native方法

1 2 3 4 5 6 7 8 9 10 11 12

-(void)webViewDidFinishLoad:(UIWebView *)webView {      self.context = [webView valueForKeyPath:@ "documentView.webView.mainFrame.javaScriptContext" ];            self.context[@ "TXBB_IOS_SDK" ] = self; }   #pragma mark - JSExport Methods - (void)callPay:(NSString *)charge success:(NSString *) success cancel:(NSString *)cancel {      ...      [Pingpp createPayment:charge appURLScheme:@ "msc"  withCompletion:completion]; }

Native -> Js

OC端调用JS代码则只需通过context调用evaluateScript方法即可，下列代码即会用JS显示Hello World,而在iOS7.0之前你可能通过[webView stringByEvaluatingJavaScriptFromString:@"document.title"]方法来获取WebView的title。

1 2 3 4 5 6

-(void)webViewDidFinishLoad:(UIWebView *)webView   {         JSContext *context=[webView valueForKeyPath:@ "documentView.webView.mainFrame.javaScriptContext" ];        NSString *alertJs=@ "alert('Hello Word')" ;       [context evaluateScript:alertJs]; }

最后

JS和OC通信还有个非常著名的第三方库WebViewJavascriptBridge,如果你的项目需要支持iOS6之前的系统，你可以通过这个项目实现JS和OC的通信。

参考链接：

http://www.skyfox.org/javascript-ios-navive-message.html

http://www.cocoachina.com/ios/20150906/13320.html

Objective-C

1	( BOOL ) webView : ( UIWebView * ) webView shouldStartLoadWithRequest : ( NSURLRequest * ) request navigationType : ( UIWebViewNavigationType ) navigationType

方法来做拦截，并在这个方法中，根据url来调用Objective-C方法