h5 上 删除 交互_Native与H5交互的一些解决方法

一、 原生代码中直接加载页面

1.    具体案例

加载本地/网络HTML5作为功能介绍页

2.    代码示例

//本地

-(void)loadLocalPage:(UIWebView*)webView

{

NSString* htmlPath = [[NSBundlemainBundle]pathForResource:@"demo"ofType:@"html"];

NSString* appHtml =[NSStringstringWithContentsOfFile:htmlPathencoding:NSUTF8StringEncodingerror:nil];

NSURL *baseURL = [NSURLfileURLWithPath:htmlPath];

[webViewloadHTMLString:appHtmlbaseURL:baseURL];

}

//网络

-(void)loadWebPage:(UIWebView *)webView

{

NSURL *url = [NSURLURLWithString:@"http://www.baidu.com"];

NSURLRequest *request = [NSURLRequestrequestWithURL:url];

[webViewloadRequest:request];

}

3.    额外操作

a  iOS中承载网页的容器是UIWebView，可以借助它的代理来监听网页加载情况；

b  在加载过程中，我们还可以获取该网页中的meta值，例如代码：

NSString *shareUrl = [messWebViewstringByEvaluatingJavaScriptFromString:@"document.getElementsByName(\"shareUrl\")[0].content"];

就是从meta中得到shareUrl对应的value值；

c  截获当前是发起的那种请求，以便native来做对应的控制，例如代码：

- (BOOL)webView:(UIWebView*)webViewshouldStartLoadWithRequest:(NSURLRequest *)requestnavigationType:(UIWebViewNavigationType)navigationType

{

NSString *requestString = [[[requestURL]absoluteString]stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

if ([requestStringhasPrefix:@"http://customersharetrigger"]){

//执行一些操作

return NO;

}

return YES;

} //可以监听到这个请求，从而达到控制作用；

二、  原生代码操作页面元素

1.    具体案例

在嵌入H5后需要操作页面元素

2.    代码示例

a、获取当前页面的url。

-(void)webViewDidFinishLoad:(UIWebView *)webView {

NSString *currentURL = [webViewstringByEvaluatingJavaScriptFromString:@"document.location.href"];

}

b、获取页面title：

NSString *currentURL = [webViewstringByEvaluatingJavaScriptFromString:@"document.location.href"];

NSString *title = [webviewstringByEvaluatingJavaScriptFromString:@"document.title"];

c、修改界面元素的值。

NSString *js_result = [webViewstringByEvaluatingJavaScriptFromString:@"document.getElementsByName('q')[0].value='朱祁林';"];

d、表单提交：

NSString *js_result2 =[webViewstringByEvaluatingJavaScriptFromString:@"document.forms[0].submit();"];

3.    代码说明

stringByEvaluatingJavaScriptFromString方法可以将javascript代码片段嵌入到页面中，通过这个方法就可以让iOS与UIWebView中的网页元素交互，例如上面的代码片段，它

功能非常的强大，用起来也相对简单，通过它我们可以很方便的操作页面元素，而且能直接插入一段JS方法，然后调用该方法执行；

三、  原生代码处理本地H5+JS

1.    具体案例

需要动态显示曲线图，如果直接加载绘制图形特别慢，所以采用本地放置模板，传入参数，然后模板自动绘制，提高体验，加快绘制；

2.    示例代码

-(void)loadWebPage:(UIWebView *)webView

{

NSURL *localPathURL = [[NSBundlemainBundle]URLForResource:@"detail"withExtension:@"html"subdirectory:@"htmlResources"];

NSString *localPathUrl = [localPathURLabsoluteString];

NSString *localParamPathUrl = [NSStringstringWithFormat:@"%@?symbol=%@&t=%f",localPathUrl,self.stockCode,self.time];

NSURL *requestURL = [NSURLURLWithString:localParamPathUrl];

[webViewloadRequest:[NSURLRequestrequestWithURL:requestURL]];

}

3.    代码说明

a 这里需要采用绝对路径拖入H5模板，就是选择CreateFolder Reference, 只有这样才能保证H5能调用到本地的JS代码，不然加载不成功，这个最初找了很多原因，最后才发现是拖入时候选择问题;

b 如果要加入参数，注意需要先转成string，然后再转为URL;

四、  原生代码与网页交互通信

1.    具体案例

原生代码与H5相互调用方法，并传递参数，而且能回调数据；

2.    借助第三方实现

WebViewJavascriptBridge，该开源库非常完美的解决了原生代码与H5交互，即互殴；

3.    代码示例

1.初始化一个webview(viewdidload)

UIWebView* webView =[[UIWebViewalloc]initWithFrame:self.view.bounds];

[self.viewaddSubview:webView];

2.将此webview与WebViewJavascriptBridge关联(viewdidload)

if (_bridge) { return; }

[WebViewJavascriptBridgeenableLogging];

_bridge = [WebViewJavascriptBridgebridgeForWebView:webViewwebViewDelegate:selfhandler:^(id data,WVJBResponseCallback responseCallback) {

NSLog(@"ObjC received message from JS:%@", data);

responseCallback(@"Response formessage from ObjC");

}];

此时webview就与js搭上桥了。下面就是方法的互调和参数的互传。

(1) js调oc方法(可以通过data给oc方法传值，使用responseCallback将值再返回给js)

[_bridgeregisterHandler:@"testObjcCallback"handler:^(id data,WVJBResponseCallback responseCallback) {

NSLog(@"testObjcCallback called:%@", data);

responseCallback(@"Response fromtestObjcCallback");

}];

这里注意testObjcCallback这个方法的标示。html那边的命名要跟ios这边相同，才能调到这个方法。当然这个名字可以两边商量着自定义。简单明确即可。

(2)oc调js方法(通过data可以传值，通过 response可以接受js那边的返回值 )

id data = @{@"greetingFromObjC": @"Hi there, JS!" };

[_bridgecallHandler:@"testJavascriptHandler"data:dataresponseCallback:^(idresponse) {

NSLog(@"testJavascriptHandlerresponded: %@", response);

}];

注意这里的 testJavascriptHandler也是个方法标示。

(3)oc给js传值(通过 response接受返回值 )

[_bridgesend:@"Astring sent from ObjC to JS"responseCallback:^(id response) {

NSLog(@"sendMessage got response:%@", response);

}];

(4)oc给js传值(无返回值)

[_bridgesend:@"A string sent from ObjC after Webview hasloaded."];

五、 总结

关于Native和H5的交互有各种形式，随着H5越来越成熟，未来的趋势就是两者形影不离，让App更具灵活性和实效性，也一定程度上提高了开发效率和迭代周期，是企业级移动应用开发的必选解决方案。