一、 原生代碼中直接加載頁(yè)面

1.????具體案例

加載本地/網(wǎng)絡(luò)HTML5作為功能介紹頁(yè)

2.????代碼示例

//本地

-(void)loadLocalPage:(UIWebView*)webView??

{??

???NSString*?htmlPath?=?[[NSBundle?mainBundle]pathForResource:@"demo"?ofType:@"html"];??

NSString*?appHtml?=[NSString?stringWithContentsOfFile:htmlPath?encoding:NSUTF8StringEncodingerror:nil];??

NSURL?*baseURL?=?[NSURLfileURLWithPath:htmlPath];??

?[webView?loadHTMLString:appHtmlbaseURL:baseURL];??

}??

?

//網(wǎng)絡(luò)

?-(void)loadWebPage:(UIWebView?*)webView ?

{??

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

NSURLRequest?*request?=?[NSURLRequestrequestWithURL:url];??

????[webView?loadRequest:request];??

}??

?

?

3.????額外操作

a? iOS中承載網(wǎng)頁(yè)的容器是UIWebView，可以借助它的代理來(lái)監(jiān)聽(tīng)網(wǎng)頁(yè)加載情況；

b? 在加載過(guò)程中，我們還可以獲取該網(wǎng)頁(yè)中的meta值，例如代碼：

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

?

就是從meta中得到shareUrl對(duì)應(yīng)的value值；

c? 截獲當(dāng)前是發(fā)起的那種請(qǐng)求，以便native來(lái)做對(duì)應(yīng)的控制，例如代碼：

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

{??

????NSString?*requestString?=?[[[request?URL]absoluteString]stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];??

????if?([requestString?hasPrefix:@"http://customersharetrigger"]){??

???????//執(zhí)行一些操作??

????????return?NO;??

????}??

????return?YES;??

}?//可以監(jiān)聽(tīng)到這個(gè)請(qǐng)求，從而達(dá)到控制作用；??

?

?

二、? 原生代碼操作頁(yè)面元素

1.????具體案例

在嵌入H5后需要操作頁(yè)面元素

2.????代碼示例

a、獲取當(dāng)前頁(yè)面的url。

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

??NSString?*currentURL?=?[webView?stringByEvaluatingJavaScriptFromString:@"document.location.href"];??

}??

?

?

b、獲取頁(yè)面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?=[webView?stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit();"];??

3.????代碼說(shuō)明

stringByEvaluatingJavaScriptFromString方法可以將javascript代碼片段嵌入到頁(yè)面中，通過(guò)這個(gè)方法就可以讓iOS與UIWebView中的網(wǎng)頁(yè)元素交互，例如上面的代碼片段，它

功能非常的強(qiáng)大，用起來(lái)也相對(duì)簡(jiǎn)單，通過(guò)它我們可以很方便的操作頁(yè)面元素，而且能直接插入一段JS方法，然后調(diào)用該方法執(zhí)行；

??

三、? 原生代碼處理本地H5+JS

1.????具體案例

需要?jiǎng)討B(tài)顯示曲線圖，如果直接加載繪制圖形特別慢，所以采用本地放置模板，傳入?yún)?shù)，然后模板自動(dòng)繪制，提高體驗(yàn)，加快繪制；

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];??

????[webView?loadRequest:[NSURLRequestrequestWithURL:requestURL]];??

???

}??

?

?

3.????代碼說(shuō)明

a 這里需要采用絕對(duì)路徑拖入H5模板，就是選擇CreateFolder Reference, 只有這樣才能保證H5能調(diào)用到本地的JS代碼，不然加載不成功，這個(gè)最初找了很多原因，最后才發(fā)現(xiàn)是拖入時(shí)候選擇問(wèn)題;

b 如果要加入?yún)?shù)，注意需要先轉(zhuǎn)成string，然后再轉(zhuǎn)為URL;

??

四、? 原生代碼與網(wǎng)頁(yè)交互通信

1.????具體案例

原生代碼與H5相互調(diào)用方法，并傳遞參數(shù)，而且能回調(diào)數(shù)據(jù)；

2.????借助第三方實(shí)現(xiàn)

WebViewJavascriptBridge，該開(kāi)源庫(kù)非常完美的解決了原生代碼與H5交互，即互毆；

3.????代碼示例

1.初始化一個(gè)webview（viewdidload）

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

????[self.view?addSubview:webView];??

?

?

?2.將此webview與WebViewJavascriptBridge關(guān)聯(lián)（viewdidload）

if?(_bridge)?{?return;?}??

???

??[WebViewJavascriptBridge?enableLogging];??

???

??_bridge?=?[WebViewJavascriptBridgebridgeForWebView:webView?webViewDelegate:self?handler:^(id?data,WVJBResponseCallback?responseCallback)?{??

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

?????

????responseCallback(@"Response?formessage?from?ObjC");??

??}];??

?

此時(shí)webview就與js搭上橋了。下面就是方法的互調(diào)和參數(shù)的互傳。

?

?（1） js調(diào)oc方法（可以通過(guò)data給oc方法傳值，使用responseCallback將值再返回給js）

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

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

????????responseCallback(@"Response?fromtestObjcCallback");??

????}];??

?

?

? 這里注意testObjcCallback這個(gè)方法的標(biāo)示。html那邊的命名要跟ios這邊相同，才能調(diào)到這個(gè)方法。當(dāng)然這個(gè)名字可以兩邊商量著自定義。簡(jiǎn)單明確即可。

?

? （2）oc調(diào)js方法（通過(guò)data可以傳值，通過(guò) response可以接受js那邊的返回值 ）

???

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

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

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

????}];??

?

?

?注意這里的 testJavascriptHandler也是個(gè)方法標(biāo)示。

?

?（3）oc給js傳值（通過(guò) response接受返回值 ）

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

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

????}];??

?

?

? （4）oc給js傳值（無(wú)返回值）

[_bridge?send:@"A?string?sent?from?ObjC?after?Webview?hasloaded."];??

???

???

?五、?總結(jié)

關(guān)于Native和H5的交互有各種形式，隨著H5越來(lái)越成熟，未來(lái)的趨勢(shì)就是兩者形影不離，讓App更具靈活性和實(shí)效性，也一定程度上提高了開(kāi)發(fā)效率和迭代周期，是企業(yè)級(jí)移動(dòng)應(yīng)用開(kāi)發(fā)的必選解決方案。

轉(zhuǎn)載于:https://www.cnblogs.com/MasterPeng/p/5729658.html

總結(jié)

以上是生活随笔為你收集整理的Native与H5交互的一些解决方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。