随着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)；
网友评论