在一些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的状态同步,就是这样处理的。
整个过程比较简单,这里简单的介绍一下。欢迎指正!