iOS开发过程中H5与OC的交互

来源：互联网发布：淘宝上买卫生巾靠谱吗编辑：程序博客网时间：2024/06/06 23:56

在一些native与H5合作开发的过程中，经常会遇到H5与native进行交互的问题，这个时候两者的通信就变得必不可少了，怎么在OC中处理H5的内容，怎么在H5 里面调用OC的东西呢？这里来介绍一下。

其实上面的引言的答案就是通过一个媒介--webView来处理。通过webView的代理方法的调用，在里面进行拦截和处理上面的需求。

一：在OC中处理H5的情况：

这个是比较简单的，其实就是写一些简单的HTML的代码，对网页的内容进行增删改查的处理，达到想要的效果，之前在做美团的商品详情页的时候就是这样的需求，选择需要的标签显示即可。

截图说明：

下面是一个简单的H5页面的内容

<html>   <head>      <meta charset="UTF-8">   </head>   <body>      <p id="word">12122121212112</p>      <ul>          <li class="change">你好</li>          <li>我好</li>          <li>大家好</li>          <li>才是真的好</li>      </ul>               </body></html>

在webView加载完毕后对H5页面内容进行处理

#pragma mark - 操作网页-(void)webViewDidFinishLoad:(UIWebView *)webView{   // 改变标题    NSString *str1 = @"var h1 = document.getElementsByTagName('h1')[0];"                      "h1.innerHTML='大神一期鲜花网';";    [webView stringByEvaluatingJavaScriptFromString:str1];        //删除尾部    NSString *str2 =@"document.getElementById('footer').remove();";    [webView stringByEvaluatingJavaScriptFromString:str2];        // 让scrollView显示    self.webView.scrollView.hidden = NO;    self.activityView.hidden = YES;        // 拿出所有的网页内容    NSString *str3 = @"document.body.outerHTML";    NSString *html = [webView stringByEvaluatingJavaScriptFromString:str3];    NSLog(@"%@", html);}

以上就做到了OC里面处理H5 的内容，就通过webView执行一些HTML的代码而已！

二：在H5中调用OC的代码

这个主要就是通过webView的一个代理方法，如下

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{    NSString *str = request.URL.absoluteString;    NSRange range = [str rangeOfString:@"xXX://"];    if (range.location != NSNotFound) {        NSString *method = [str substringFromIndex:range.location + range.length];        NSLog(@"%@", method);//        SEL sel = NSSelectorFromString(method);//        [self performSelector:sel];    }    //    NSLog(@"%@", str);            return YES;}

在上面的代理方法里面进行拦截，在H5里面的交互中，主要就是通过设置window.location来改变webView的URL，来触发这个代理方法，在OC中通过对webView的加载的URL进行拦截，私有协议的处理和截取，然后调用一下native的方法即可

      <script>          var username = document.getElementById('username');          var pwd = document.getElementById('pwd');          var btn = document.getElementById('btn');                     btn.onclick = function(){            var name = username.value; // 拿到用户名            var password = pwd.value;             window.location.href = 'xXX://' + name + '?' + password;          }      </script>

这个其实过程也比较简单，在聚力财经的人物的详情页，处理节目预定的时候，要做到H5和native的状态同步，就是这样处理的。

整个过程比较简单，这里简单的介绍一下。欢迎指正！

0 0