如今app中H5页面越来越多,app如何与H5页面交互是开发者不可避免的问题,今天就和大家探讨这个问题。
示例网页源码:
webView与H5交互方法function alertTest()
{
alert("网页提示框!");
}
function postString(){
return document.getElementById("text1").value;
}
打开相册
打开相机
一、借助于第三方
推荐一个比较好的第三方库即:WebViewJavascriptBridge
该库使用起来非常简单:
1.[WebViewJavascriptBridge enableLogging]; // 开启日志
2.//初始化WebViewJavascriptBridge方法
_bridge= [WebViewJavascriptBridge bridgeForWebView:self.webView webViewDelegate:self handler:^(id data,WVJBResponseCallback responseCallback) {
}];
3.JS调用OC方法 //原生与JS约定接口名为“openMyCamera”,data是JS传递过来的信息,responseCallback来将信息传递给JS
[_bridge registerHandler:@"openMyCamera" handler:^(id data,WVJBResponseCallback responseCallback) {
[self openMyCamera];
responseCallback("postInfomationToJS")
}];
4.OC调用JS方法 data传入参数,response返回参数
[_bridge callHandler:@"postString" data:nil responseCallback:^(id response) {
NSLog(@"paySuccessJavascriptHandler responded: %@", response);
}];
深入了解的可以看这篇文章
二、不借助于第三方
1.OC调用JS方法
如上实例代码调用JS的 alertTest与postString方法:
NSString *str = [_webView stringByEvaluatingJavaScriptFromString:@"postString();"];
[_webView stringByEvaluatingJavaScriptFromString:@"alertTest();"];
2.H5页面调用OC方法
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
webview每次加载之前都会调用这个方法,在此方法中拦截网页加载的URL 我们可以与网页制定协议,例如:以 iOS://开头的URL我们就拦截,再根据拦截信息调用对应的方法。
打开相册
打开相机
这样就可以调用OC的方法了。
- (void)openMyAlbum {
//打开相册
}
- (void)openMyCamera {
//打开相机
}
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
//在此方法中拦截网页加载的URL 我们可以与网页制定协议,例如:以iOS://开头的URL我们就拦截,再根据拦截信息调用对应的方法
NSString *urlstr = request.URL.absoluteString;
NSRange range = [urlstr rangeOfString:@"ios://"];
if (range.length!=0) {
NSString *method = [urlstr substringFromIndex:(range.location+range.length)];
SEL selctor = NSSelectorFromString(method);
[self performSelector:selctor withObject:nil];
}
return YES;
}