你的位置:首页 > 操作系统

[操作系统]Native与H5交互的一些解决方法


一、 原生代码中直接加载页面

1.    具体案例

加载本地/网络HTML5作为功能介绍页

2.    代码示例

//本地

  1. -(void)loadLocalPage:(UIWebView*)webView  
  2. {  
  3.    NSString* htmlPath = [[NSBundle mainBundle]pathForResource:@"demo" ofType:@"html"];  
  4. NSString* appHtml =[NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncodingerror:nil];  
  5. NSURL *baseURL = [NSURLfileURLWithPath:htmlPath];  
  6.  [webView loadHTMLString:appHtmlbaseURL:baseURL];  
  7. }  

 

//网络

 -(void)loadWebPage:(UIWebView *)webView  

  1. {  
  2. NSURL *url = [NSURLURLWithString:@"http://www.baidu.com"];  
  3. NSURLRequest *request = [NSURLRequestrequestWithURL:url];  
  4.     [webView loadRequest:request];  
  5. }  

 

 

3.    额外操作

a  iOS中承载网页的容器是UIWebView,可以借助它的代理来监听网页加载情况;

b  在加载过程中,我们还可以获取该网页中的meta值,例如代码:

 NSString *shareUrl = [messWebViewstringByEvaluatingJavaScriptFromString:@"document.getElementsByName(\"shareUrl\")[0].content"];  

 

就是从meta中得到shareUrl对应的value值;

c  截获当前是发起的那种请求,以便native来做对应的控制,例如代码:

  1. - (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest *)requestnavigationType:(UIWebViewNavigationType)navigationType  
  2. {  
  3.     NSString *requestString = [[[request URL]absoluteString]stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];  
  4.     if ([requestString hasPrefix:@"http://customersharetrigger"]){  
  5.        //执行一些操作  
  6.         return NO;  
  7.     }  
  8.     return YES;  
  9. } //可以监听到这个请求,从而达到控制作用;  

 

 

二、  原生代码操作页面元素

1.    具体案例

在嵌入H5后需要操作页面元素

2.    代码示例

a、获取当前页面的url。

  1. -(void)webViewDidFinishLoad:(UIWebView *)webView {   
  2.   NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];  
  3. }  

 

 

b、获取页面title:

  1. NSString *currentURL = [webViewstringByEvaluatingJavaScriptFromString:@"document.location.href"];  
  2.   
  3.  NSString *title = [webviewstringByEvaluatingJavaScriptFromString:@"document.title"];  

 

c、修改界面元素的值。

  1. NSString *js_result = [webViewstringByEvaluatingJavaScriptFromString:@"document.getElementsByName('q')[0].value='朱祁林';"];  

d、表单提交:

  1. NSString *js_result2 =[webView stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit();"];  

3.    代码说明

stringByEvaluatingJavaScriptFromString方法可以将javascript代码片段嵌入到页面中,通过这个方法就可以让iOS与UIWebView中的网页元素交互,例如上面的代码片段,它

功能非常的强大,用起来也相对简单,通过它我们可以很方便的操作页面元素,而且能直接插入一段JS方法,然后调用该方法执行;

  

三、  原生代码处理本地H5+JS

1.    具体案例

需要动态显示曲线图,如果直接加载绘制图形特别慢,所以采用本地放置模板,传入参数,然后模板自动绘制,提高体验,加快绘制;

2.    示例代码

  1. -(void)loadWebPage:(UIWebView *)webView  
  2. {  
  3.     NSURL *localPathURL = [[NSBundlemainBundle] URLForResource:@"detail" withExtension:@"html"subdirectory:@"htmlResources"];  
  4.     NSString *localPathUrl = [localPathURLabsoluteString];  
  5.     NSString *localParamPathUrl = [NSStringstringWithFormat:@"%@?symbol=%@&t=%f",localPathUrl,self.stockCode,self.time];  
  6.     NSURL *requestURL = [NSURLURLWithString:localParamPathUrl];  
  7.     [webView loadRequest:[NSURLRequestrequestWithURL:requestURL]];  
  8.    
  9. }  

 

 

3.    代码说明

a 这里需要采用绝对路径拖入H5模板,就是选择CreateFolder Reference, 只有这样才能保证H5能调用到本地的JS代码,不然加载不成功,这个最初找了很多原因,最后才发现是拖入时候选择问题;

b 如果要加入参数,注意需要先转成string,然后再转为URL;

  

四、  原生代码与网页交互通信

1.    具体案例

原生代码与H5相互调用方法,并传递参数,而且能回调数据;

2.    借助第三方实现

WebViewJavascriptBridge,该开源库非常完美的解决了原生代码与H5交互,即互殴;

3.    代码示例

1.初始化一个webview(viewdidload)

  1. UIWebView* webView =[[UIWebView alloc] initWithFrame:self.view.bounds];  
  2.     [self.view addSubview:webView];  

 

 

 2.将此webview与WebViewJavascriptBridge关联(viewdidload)

  1. if (_bridge) { return; }  
  2.    
  3.   [WebViewJavascriptBridge enableLogging];  
  4.    
  5.   _bridge = [WebViewJavascriptBridgebridgeForWebView:webView webViewDelegate:self handler:^(id data,WVJBResponseCallback responseCallback) {  
  6.     NSLog(@"ObjC received message from JS:%@", data);  
  7.      
  8.     responseCallback(@"Response formessage from ObjC");  
  9.   }];  

 

此时webview就与js搭上桥了。下面就是方法的互调和参数的互传。

 

 (1) js调oc方法(可以通过data给oc方法传值,使用responseCallback将值再返回给js)

  1. [_bridgeregisterHandler:@"testObjcCallback" handler:^(id data,WVJBResponseCallback responseCallback) {  
  2.         NSLog(@"testObjcCallback called:%@", data);  
  3.         responseCallback(@"Response fromtestObjcCallback");  
  4.     }];  

 

 

  这里注意testObjcCallback这个方法的标示。html那边的命名要跟ios这边相同,才能调到这个方法。当然这个名字可以两边商量着自定义。简单明确即可。

 

  (2)oc调js方法(通过data可以传值,通过 response可以接受js那边的返回值 )

 
  1.    
  2. id data = @{@"greetingFromObjC": @"Hi there, JS!" };  
  3.     [_bridgecallHandler:@"testJavascriptHandler" data:data responseCallback:^(idresponse) {  
  4.         NSLog(@"testJavascriptHandlerresponded: %@", response);  
  5.     }];  

 

 

 注意这里的 testJavascriptHandler也是个方法标示。

 

 (3)oc给js传值(通过 response接受返回值 )

 
  1. [_bridge send:@"Astring sent from ObjC to JS" responseCallback:^(id response) {  
  2.         NSLog(@"sendMessage got response:%@", response);  
  3.     }];  

 

 

  (4)oc给js传值(无返回值)

  1. [_bridge send:@"A string sent from ObjC after Webview hasloaded."];  
  2.    
  3.    

 五、 总结

关于Native和H5的交互有各种形式,随着H5越来越成熟,未来的趋势就是两者形影不离,让App更具灵活性和实效性,也一定程度上提高了开发效率和迭代周期,是企业级移动应用开发的必选解决方案。