隨著HTML5普及和功能日益強大，現在許多互聯網公司開始由原生開發轉向嵌套html開發了。
1、 預算有限的情況下，建議選擇HTML5技術;
2、 用戶體驗要求高的情況下，更適合原生技術;
3、 開發速度要求快的情況下，建議選擇HTML5技術;
4、 必須用到某個HTML5不支持的系統功能的情況下，適合原生技術。
合理的應用原生技術與前端技術使得開發的更便捷，更高效。
首先嵌套html分兩種情況：
1.通過URL地址加載到webView上
self.url = [NSURL URLWithString:@"url鏈接"];
webView.delegate = self; ?
NSURLRequest *request = [NSURLRequest requestWithURL:self.url];
[webView loadRequest:request];
[self.view addSubview:[HomeWebViewController shareManager].webView];
2.直接運行本地html加載到webView上
由于前端寫好的html和js，css樣式文件，它們是通過絕對路徑或者相對路徑引用。如果我們直接通過Create groups（黃色文件）添加，該文件里面的js，css可能顯示不出來或者找不到該html文件。為了不改動源碼的情況下，我們可以通過Create folder references （藍色文件）添加到項目中；
NSString *mainBundlePath = [[NSBundle mainBundle] bundlePath];
webView.delegate = self;
NSString *basePath = [NSString stringWithFormat:@"%@/文件名",mainBundlePath];
self.url = [NSURL fileURLWithPath:basePath isDirectory:YES];
NSString *htmlPath = [NSString stringWithFormat:@"%@/index.html",basePath];
NSString *htmlString = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
[webView loadHTMLString:htmlString baseURL:self.url];
[self.view addSubview:[HomeWebViewController shareManager].webView];
OC交互JS：
1.使用iOS自帶的JavaScriptCore.framework來交互
其實大多數人是使用第三方或者別人封裝好的api來實現交互的，但是使用別人的代碼減少工作量前提下建議你了解蘋果公司的靜態庫，你會發現其實蘋果已經幫我們做好了許多工作，調用原生的api工作量也不大，而且選擇性強，便于你根據實際的業務需要進行二次封裝，而且最終要的一點，不用擔心以后的系統版本的兼容性問題。
好了，接下來看代碼時間了?。?！
首先我們添加JavaScriptCore.framework庫，引用#import<JavaScriptCore/JavaScriptCore.h>
應用協議把方法注入到html頁面，實現JS調用原生的方法
例如：html頁面有個（a.b的響應事件）a為注入對象，b為調用的oc方法
通俗點就是html要通過對象a 來調用oc里的方法b，所有我們要在頁面注入對象a，用協議實現方法b供頁面調用；
（注：可能你們公司前端一些調用的oc方法無法調用的情況，這情況很少但是也會出現；遇到這種問題，只需前端在調用這個方法加上一個延遲調用（延遲0.X秒就行了，一般0.2-0.5秒左右就可以了）
1.HomeWebViewController.h
@protocol MyWebProtocol
-(void)b:(NSString *)message;
@end
@interface HomeWebViewController : UIViewController<NSStreamDelegate,MyWebProtocol>
2.HomeWebViewController.m；
JSContext? ? *jsContext;
//webView關聯加載的html頁面（如果只是該View只加載一個html，可直接加入到viewDidLoad下;需要html跳轉其他頁面也需要交互時，添加到webViewDidFinishLoad方法下）
_jsContext=[[HomeWebViewController shareManager].webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//_jsContext[@"注入的對象名"]=self;
_jsContext[@"a"]=self;
//_jsContext[@"注入對象名"]=其他類; //(一個頁面可同時注入多個對象，也可指向多個類)
-(void)b(NSString *)message{
//message為前端傳過來的數據，由于oc和js的函數的命名差異，建議數據交互采用json的字符串，無論對iOS還是前端都比較好處理；
//you can do some things?
//需要回調可把void改成對應的類型；
}
實現原生調用js的方法
這種情況就是我們通過oc代碼調用js的方法，下面我就簡單的介紹：
已上面相反 ，由oc是調用html頁面的a.b(如果沒有a，可直接調用方法b)；
//首先創建一個js
NSString *js = [NSString stringWithFormat:@"alert('iOS');"]; //(調用彈窗)
NSString *js = [NSString stringWithFormat:@"a.b();"]; //(無參)
NSString*js = [NSStringstringWithFormat:@"a.b('%@','%@');",@"男",@"女"]; //(傳2個參數)
NSString *js = [NSString stringWithFormat:@"a.b((\'{\"name\":\"joab\"}\'))"]; //(傳Json參數)
[[HomeWebViewController shareManager].webView stringByEvaluatingJavaScriptFromString:js];
2.使用開源框架實現交互
網上有許多前輩寫好的開源交互框架，我在這里給大家推薦使用WebViewJavascriptBridge，該框架已經在github上有不少的demo，不了解的可以去上面學習；
（下面這段介紹翻譯自Marcus Westin的開源框架WebViewJavascriptBridge的readme,英文原文鏈接）https://github.com/marcuswestin/WebViewJavascriptBridge.
WebViewJavascriptBridge是Obj-C和JavaScript通過UIWebViews/WebViews互通消息的一個iOS/OSX的橋梁. 如果你喜歡WebViewJavascriptBridge,你可能也想check outWebViewProxy.
Obj-C和JavaScript原理簡單說一下，Obj-C調用JavaScript很簡單，可以通過webview的stringByEvaluatingJavaScriptFromString:方法調用JavaScript代碼；JavaScript調用Obj-C，則是通過web view的代理方法shouldStartLoadWithRequest：來接收JavaScript的網絡請求從而實現調用。
正在使用WebViewJavascriptBridge的項目
有很多的公司和項目在使用WebViewJavascriptBridge.這個列表不完整,你可以隨意添加.
Flutterby Labs
JD Media’s鼎盛中華
Dojo4’sImbed
安裝& 例子 (iOS & OSX)
首先打開Example Apps文件夾.打開iOS或者OSX的工程然后點擊運行.
在你自己的工程中用WebViewJavascriptBridge:
1) 拖動 WebViewJavascriptBridge 文件夾到你的工程中.
在出現的對話框中, 取消 (我覺得應該是選中)”Copy items into destination group’s folder” 并且 選擇 “Create groups for any folders”
2) 引入頭文件并且申明一個屬性:
#import?"WebViewJavascriptBridge.h"
...
@property?WebViewJavascriptBridge*?bridge;
3) 實例化WebViewJavascriptBridge并且帶上一個UIWebView (iOS)或者WebView (OSX):
self.bridge?=?[WebViewJavascriptBridge?bridgeForWebView:webView?handler:^(id?data,?WVJBResponseCallback?responseCallback)?{
NSLog(@"Received?message?from?javascript:?%@",?data);
responseCallback(@"Right?back?atcha");
}];
4) 首先從ObjC到javascript發送一些消息:
[self.bridge?send:@"Well?hello?there"];
[self.bridge?send:[NSDictionary?dictionaryWithObject:@"Foo"forKey:@"Bar"]];
[self.bridge?send:@"Give?me?a?response,?will?you?"responseCallback:^(id?responseData)?{
NSLog(@"ObjC?got?its?response!?%@",?responseData);
}];
5) 然后,看看javascript這邊:
functionconnectWebViewJavascriptBridge(callback)?{
if(window.WebViewJavascriptBridge)?{
callback(WebViewJavascriptBridge)
}else{
document.addEventListener('WebViewJavascriptBridgeReady',function()?{
callback(WebViewJavascriptBridge)
},false)
}
}
connectWebViewJavascriptBridge(function(bridge)?{
/*?Init?your?app?here?*/
bridge.init(function(message,?responseCallback)?{
alert('Received?message:?'+?message)
if(responseCallback)?{
responseCallback("Right?back?atcha")
}
})
bridge.send('Hello?from?the?javascript')
bridge.send('Please?respond?to?this',functionresponseCallback(responseData)?{
console.log("Javascript?got?its?response",?responseData)
})
})
Contributors & Forks
Contributors:https://github.com/marcuswestin/WebViewJavascriptBridge/graphs/contributors
Forks:https://github.com/marcuswestin/WebViewJavascriptBridge/network/members
API 參考
ObjC API
[WebViewJavascriptBridge bridgeForWebView: (UIWebView/WebView*)webview handler:(WVJBHandler)handler]
[WebViewJavascriptBridge bridgeForWebView:
(UIWebView/WebView*)webview webViewDelegate:
(UIWebViewDelegate*)webViewDelegate handler:(WVJBHandler)handler]
給web view創建一個javascript的橋梁.
假如javascript需要一個反饋,那么 WVJBResponseCallback 不能為 nil .
當然,通過 webViewDelegate:(UIWebViewDelegate*)webViewDelegate 你可以得到web view的生命周期事件.
例子:
[WebViewJavascriptBridge?bridgeForWebView:webView?handler:^(id?data,?WVJBResponseCallback?responseCallback)?{
NSLog(@"Received?message?from?javascript:?%@",?data);
if(responseCallback)?{
responseCallback(@"Right?back?atcha");
}
}]
[WebViewJavascriptBridge?bridgeForWebView:webView?webViewDelegate:self?handler:^(id?data,?WVJBResponseCallback?responseCallback)?{/*?...?*/}];
[bridge send:(id)data]
[bridge send:(id)data responseCallback:(WVJBResponseCallback)responseCallback]
發送一個消息給javascript. 并且在發送消息成功后可以通過 responseCallback block做出一 些反應.
例子:
[self.bridge?send:@"Hi"];
[self.bridge?send:[NSDictionary?dictionaryWithObject:@"Foo"forKey:@"Bar"]];
[self.bridge?send:@"I?expect?a?response!"responseCallback:^(id?responseData)?{
NSLog(@"Got?response!?%@",?responseData);
}];
[bridge registerHandler:(NSString*)handlerName handler: (WVJBHandler)handler]
注冊一個叫做 handlerName 的handler. javascript能夠通過 WebViewJavascriptBridge.callHandler(“handlerName”) 調起這個handler.
例子:
[self.bridge?registerHandler:@"getScreenHeight"handler:^(id?data,?WVJBResponseCallback?responseCallback)?{
responseCallback([NSNumber?numberWithInt:[UIScreen?mainScreen].bounds.size.height]);
}];
[bridge callHandler:(NSString*)handlerName data:(id)data]
[bridge callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)callback]
調起javascript叫做 handlerName的handler. 在調用 handler成功后可以通過responseCallback block做出反應.
例子:
[self.bridge?callHandler:@"showAlert"data:@"Hi?from?ObjC?to?JS!"];
[self.bridge?callHandler:@"getCurrentPageUrl"data:nil?responseCallback:^(id?responseData)?{
NSLog(@"Current?UIWebView?page?URL?is:?%@",?responseData);
}];
定義 bundle
WebViewJavascriptBridge 要求 WebViewJavascriptBridge.js.txt 文件嵌入到web view來創建一個在JS這邊的橋梁.標準的實現是用 mainBundle 找到這個文件.如果你建立一個 靜態庫并且你把這個文件放在其他地方,你可以用下面的方法找 WebViewJavascriptBridge.js.txt 文件:
[WebViewJavascriptBridge bridgeForWebView:
(UIWebView/WebView*)webView webViewDelegate:
(UIWebViewDelegate*)webViewDelegate handler:(WVJBHandler)handler
resourceBundle:(NSBundle*)bundle
例子:
[WebViewJavascriptBridge?bridgeForWebView:_webView
webViewDelegate:self
handler:^(id?data,?WVJBResponseCallback?responseCallback)?{
NSLog(@"Received?message?from?javascript:?%@",?data);
}
resourceBundle:[NSBundle?bundleWithURL:[[NSBundle?mainBundle]?URLForResource:@"ResourcesBundle"withExtension:@"bundle"]]
];
Javascript API
document.addEventListener(‘WebViewJavascriptBridgeReady’,
function onBridgeReady(event) { … }, false)
一直等待 WebViewJavascriptBridgeReady DOM 事件.
例子:
document.addEventListener('WebViewJavascriptBridgeReady',function(event)?{
varbridge?=?event.bridge
//?Start?using?the?bridge
},false)
bridge.init(function messageHandler(data, response) { … })
初始化這個橋. 這會調起 ‘WebViewJavascriptBridgeReady’ 的事件handler.
這個 messageHandler 函數會接收通過ObjC的 [bridge send:(id)data] 和 [bridge send:(id)data responseCallback:(WVJBResponseCallback)responseCallback] 方法 發送的所有消息.
如果ObjC發送消息時有WVJBResponseCallback block,那么可以通過response對象發送消息.
例子:
bridge.init(function(data,?responseCallback)?{
alert("Got?data?"+?JSON.stringify(data))
if(responseCallback)?{
responseCallback("Right?back?atcha!")
}
})
bridge.send(“Hi there!”)
bridge.send({ Foo:”Bar” })
bridge.send(data, function responseCallback(responseData) { …
})
給ObjC發送消息. 在發送成功后可以通過 responseCallback 函數做出反應.
例子:
bridge.send("Hi?there!")
bridge.send("Hi?there!",function(responseData)?{
alert("I?got?a?response!?"+JSON.stringify(responseData))
})
bridge.registerHandler(“handlerName”, function(responseData) { … })
注冊一個叫做 handlerName 的handler. ObjC能夠通過 [bridge callHandler:”handlerName” data:@”Foo”] 和 [bridge callHandler:”handlerName” data:@”Foo” responseCallback:^(id responseData) { … }] 兩個方法調起這個handler.
例子:
bridge.registerHandler("showAlert",function(data)?{?alert(data)?})
bridge.registerHandler("getCurrentPageUrl",function(data,?responseCallback)?{
responseCallback(document.location.toString())
})
iOS4 支持 (包括 JSONKit)
注:iOS4支持尚未在V2 +測試.
WebViewJavascriptBridge 默認使用 NSJSONSerialization .如果你需要iOS 4的支持,你可以用JSONKit,并且增加 USE_JSONKIT 的預處理宏到你的工程中.
以上就是一些交互的基礎知識，有不懂的地方或者有更好的方法可以留言交流(n_n)；
