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更具靈活性和實效性，也一定程度上提高了開發效率和迭代周期，是企業級移動應用開發的必選解決方案。