一、原生代碼中直接加載頁面（攔截）
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（WebViewJavascriptBridge第三方）
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;
四、 原生代碼與網頁交互通信（WebViewJavascriptBridge第三方）
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."];
五、UIWebView頁面信息的離線緩存
推薦一個比較好的第三方庫RNCachingURLProtocol ，只需要在AppDelegate中加入下面方法即可。
[NSURLProtocolregisterClass:[RNCachingURLProtocolclass]];
地址:https://github.com/rnapier/RNCachingURLProtocol
六、 總結
關於Native和H5的交互有各種形式，隨着H5越來越成熟，未來的趨勢就是兩者形影不離，讓App更具靈活性和實效性，也一定程度上提高了開發效率和迭代周期，是企業級移動應用開發的必選解決方案，推薦：IT面試寶典（典型）。
版權聲明：本文為博主原創文章，未經博主允許不得轉載。
七、附加 JS端配置：（WebViewJavascriptBridge第三方）
<!doctype html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style type='text/css'>
html { font-family:Helvetica; color:#222; }
h1 { color:steelblue; font-size:24px; margin-top:24px; }
button { margin:0 3px 10px; font-size:12px; }
.logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }
</style>
</head>
<body>
<h1>WebViewJavascriptBridge Demo</h1>
<script>
window.onerror = function(err) {
log('window.onerror: ' + err)
}
/*這段代碼固定的要放到js中*/
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
//與oc交互的所有方法都要放到這兒注冊
setupWebViewJavascriptBridge(function(bridge) {
var uniqueId = 1
function log(message, data) {
var log = document.getElementById('log')
var el = document.createElement('div')
el.className = 'logLine'
el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
if (log.children.length) { log.insertBefore(el, log.children[0]) }
else { log.appendChild(el) }
}
/*JS給ObjC提供公開的API，在ObjC端可以手動調用JS的這個API。接收ObjC傳過來的參數，且可以回調ObjC*/
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
log('ObjC called testJavascriptHandler with', data)
var responseData = { 'Javascript Says':'Right back atcha!' }
log('JS responding with', responseData)
responseCallback(responseData)
})
document.body.appendChild(document.createElement('br'))
var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
callbackButton.innerHTML = 'Fire testObjcCallback'
callbackButton.onclick = function(e) {
e.preventDefault()
log('JS calling handler "testObjcCallback"')
/*JS給ObjC提供公開的API，ObjC端通過注冊，就可以在JS端調用此API時，得到回調。ObjC端可以在處理完成后，反饋給JS，這樣寫就是在載入頁面完成時就先調用*/
bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
log('JS got response', response)
})
}
})
</script>
<div id='buttons'></div>
<div id='log'></div>
</body>
</html>
github測試demo：https://github.com/n1sunjianfei/iOS-And-H5
參考文獻：http://www.myexception.cn/operating-system/1977272.html
http://www.jianshu.com/p/4ed3e5ed99c6
推薦閱讀：http://www.cnblogs.com/jiang-xiao-yan/p/5345755.html