标签：
前段时间在做项目时，在UIWebView加载的Html中点击了一个区域需弹出拍照界面，可是根据业务的不同情况，区域的位置是不同的。我考虑了多种方案，最后还是觉得这个通过“桥梁”用OC方法来处理对应节点的触发事件更为直接和方便。
工具类：WebViewJavascriptBridge 顾名思义，此类就像OC与JS的桥梁，可以使JS的事件与OC的方法相关联。
WebViewJavascriptBridge包含一个类实例方法，入参是委托对象。
有一个委托方法，此方法是用来接受到html点击事件返回的message后回调方法，参数包含：message（用来判断是哪个点击事件）,webView（判断是从哪个UIWebView传来的事件）
-(void)javascriptBridge:(WebViewJavascriptBridge *)bridge receivedMessage:(NSString *)message fromWebView:(UIWebView *)webView;
可调用的方法：
-(void)sendMessage:(NSString *)message toWebView:(UIWebView *)webView;
接下来就是其具体的使用方法
1- >第一步：（配置）在html中对应需要附加点击事件的节点的属性中添加onclick=” WebViewJavascriptBridge.sendMessage(‘messageContent’)”。
以下JS代码为添加事件监听以及消息处理函数：
<script type="text/javascript"> document.addEventListener(‘WebViewJavascriptBridgeReady‘, onBridgeReady, false);
function onBridgeReady() { WebViewJavascriptBridge.setMessageHandler(function(message) { var el = document.body.appendChild(document.createElement(‘div‘)); el.innerHTML = message; }); }
</script>
messageContent自定义。用来在OC方法中筛选
2->第二步（响应事件）在加载之前html的webview所在controller中创建WebViewJavascriptBridge的实例，直接通过类方法创建，传入delegate对象参数。
@interface ViewController ()<WebViewJavascriptBridgeDelegate>
@property (strong, nonatomic) WebViewJavascriptBridge *bridge;
@end
@implementation ViewController
- (void)viewDidLoad {
NSError *error = nil;
NSString *filePath = [[NSBundle mainBundle] pathForResource:HTMLNAME ofType:HTML];//HTMLNAME:html文件名,HTML:@"html"
NSString *htmlPath = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:&error];
self.bridge=[WebViewJavascriptBridge javascriptBridgeWithDelegate:self];
[self.webView loadHTMLString:temp baseURL:nil];
self.webView.delegate = self.bridge;
}
实现代理方法：
- (void)javascriptBridge:(WebViewJavascriptBridge *)bridge receivedMessage:(NSString *)message fromWebView:(UIWebView *)webView{ if ([message isEqualToString:TAKEPHOTOTAG]) { //可调用OC方法来响应事件 } }
3->如果还需要将在OC方法中处理过的数据返回到Html中，可以使用以下方法
①添加JS函数，此函数是用来放入数据（我的DEMO中是返回的图片资源）
<script type="text/javascript">
function changeImg(option){
document.getElementById("myImage").src = "data:image/png;base64,"+option;
}
</script>
②OC方法中将这个函数插入到页面上执行
[self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"changeImg(\"%@\")",[GTMBase64 stringByEncodingData:UIImagePNGRepresentation(image)]]];
TIP：使用stringByEvaluatingJavaScriptFromString时必须在UIWebView加载完成后（也就是webViewDidFinishLoad:）后执行；JS函数需要传参时，在OC中引号必须转义（如changeImg(\"%@\") )
我写了一个简单的DEMO，在网页中也能拍照。
原创文章转载请注明：转载自Alan_Sim
本文固定链接：http://www.cnblogs.com/AlannSim/p/4845945.html
在UIWebView中加载的HTML所触发的事件通过OC方法响应
标签：
原文地址：http://www.cnblogs.com/AlannSim/p/4845945.html
