webview与html5交互ios,iOS webView与H5页面交互

如今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;

}