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

最新推荐文章于 2024-05-08 14:29:47 发布

yungeIOS

最新推荐文章于 2024-05-08 14:29:47 发布

阅读量2.4k

点赞数

分类专栏： H5与native的混合开发 iOS开发进阶文章标签： javascript html ios ios开发通信

本文链接：https://blog.csdn.net/yungeIOS/article/details/53165199

版权

iOS开发进阶同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

H5与native的混合开发

1 篇文章 0 订阅

订阅专栏

在一些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的状态同步，就是这样处理的。

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

yungeIOS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iOS开发过程中H5与OC的交互

在一些native与H5合作开发的过程中，经常会遇到H5与native进行交互的问题，这个时候两者的通信就变得必不可少了，怎么在OC中处理H5的内容，怎么在H5 里面调用OC的东西呢？这里来介绍一下。其实上面的引言的答案就是通过一个媒介--webView来处理。通过webView的代理方法的调用，在里面进行拦截和处理上面的需求。一：在OC中处理H5的情况：这个是比较简单的，其实就是写一
复制链接

扫一扫

专栏目录