生活随笔
收集整理的這篇文章主要介紹了
Native与H5交互的一些解决方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、 原生代碼中直接加載頁面
1.????具體案例
加載本地/網絡HTML5作為功能介紹頁
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];??}?? ?
//網絡
?-(void)loadWebPage:(UIWebView?*)webView ?
{??NSURL?*url?=?[NSURLURLWithString:@"http://www.baidu.com"];??NSURLRequest?*request?=?[NSURLRequestrequestWithURL:url];??????[webView?loadRequest:request];??}?? ?
?
3.????額外操作
a? iOS中承載網頁的容器是UIWebView，可以借助它的代理來監聽網頁加載情況；
b? 在加載過程中，我們還可以獲取該網頁中的meta值，例如代碼：
?NSString?*shareUrl?=?[messWebViewstringByEvaluatingJavaScriptFromString:@"document.getElementsByName(\"shareUrl\")[0].content"]; ?
?
就是從meta中得到shareUrl對應的value值；
c? 截獲當前是發起的那種請求，以便native來做對應的控制，例如代碼：
-?(BOOL)webView:(UIWebView*)webView?shouldStartLoadWithRequest:(NSURLRequest?*)requestnavigationType:(UIWebViewNavigationType)navigationType??{??????NSString?*requestString?=?[[[request?URL]absoluteString]stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];??????if?([requestString?hasPrefix:@"http://customersharetrigger"]){?????????????????return?NO;??????}??????return?YES;??}? ?
?
二、? 原生代碼操作頁面元素
1.????具體案例
在嵌入H5后需要操作頁面元素
2.????代碼示例
a、獲取當前頁面的url。
-(void)webViewDidFinishLoad:(UIWebView?*)webView?{?????NSString?*currentURL?=?[webView?stringByEvaluatingJavaScriptFromString:@"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?=[webView?stringByEvaluatingJavaScriptFromString:@"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];??????[webView?loadRequest:[NSURLRequestrequestWithURL:requestURL]];?????}?? ?
?
3.????代碼說明
a 這里需要采用絕對路徑拖入H5模板，就是選擇CreateFolder Reference, 只有這樣才能保證H5能調用到本地的JS代碼，不然加載不成功，這個最初找了很多原因，最后才發現是拖入時候選擇問題;
b 如果要加入參數，注意需要先轉成string，然后再轉為URL;
??
四、? 原生代碼與網頁交互通信
1.????具體案例
原生代碼與H5相互調用方法，并傳遞參數，而且能回調數據；
2.????借助第三方實現
WebViewJavascriptBridge，該開源庫非常完美的解決了原生代碼與H5交互，即互毆；
3.????代碼示例
1.初始化一個webview（viewdidload）
UIWebView*?webView?=[[UIWebView?alloc]?initWithFrame:self.view.bounds];??????[self.view?addSubview:webView];?? ?
?
?2.將此webview與WebViewJavascriptBridge關聯（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");????}];?? ?
此時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:data?responseCallback:^(idresponse)?{??????????NSLog(@"testJavascriptHandlerresponded:?%@",?response);??????}];?? ?
?
?注意這里的 testJavascriptHandler也是個方法標示。
?
?（3）oc給js傳值（通過 response接受返回值 ）
[_bridge?send:@"Astring?sent?from?ObjC?to?JS"?responseCallback:^(id?response)?{??????????NSLog(@"sendMessage?got?response:%@",?response);??????}];?? ?
?
? （4）oc給js傳值（無返回值）
[_bridge?send:@"A?string?sent?from?ObjC?after?Webview?hasloaded."];???????? ?五、?總結
關于Native和H5的交互有各種形式，隨著H5越來越成熟，未來的趨勢就是兩者形影不離，讓App更具靈活性和實效性，也一定程度上提高了開發效率和迭代周期，是企業級移動應用開發的必選解決方案。
轉載于:https://www.cnblogs.com/MasterPeng/p/5729658.html
總結
以上是生活随笔為你收集整理的Native与H5交互的一些解决方法的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
