前言
好久没有维护简书了...大家的提问也没来得及回复,深感抱歉....最近在忙OC->JS交互的工作,抽空整理了一篇简书跟大家分享一下.
废话不多说,直接上代码!
OC端
导入 #import "WebViewJavascriptBridge.h"
-(void)addRoute:(UIWebView*)webView{
//OC --> JS交互
// 开启日志
[WebViewJavascriptBridge enableLogging];
// 给哪个webview建立JS与OjbC的沟通桥梁
self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
[self.bridge setWebViewDelegate:self];
/**
JS调用OC:
实质:OC注册方法给JS调用
@param data JS所传的参数
@param registerHandler 约定的方法名(此处约定为getOC)
@param responseCallback OC端通过responseCallback回调JS端,JS就可以得到所需要的数据
*/
[self.bridge registerHandler:@"getOC" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"--------------JS调用getOC->JS回调的数据: %@", data);
NSError *parseError = nil;
NSData *jsonData = [NSJSONSerialization dataWithJSONObject:data options:NSJSONWritingPrettyPrinted error:&parseError];
NSString *message = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];
[[MyAlertView alertViewWithTitle:@"OC的弹框-JS调用getOC" message:message onBtnClicked:^(int btnIndex) {
} cancelButtonTitle:@"确定" otherButtonTitles:nil] show];
if (responseCallback) {
// 反馈给JS
responseCallback(@{@"blogName": @"楠哥"});
}
}];
/**
OC调用JS:
@param callHandler 约定的方法名(此处约定为getJS)
@param data OC所传的参数
@param responseData JS回调数据
*/
[self.bridge callHandler:@"getJS" data:@{@"name": @"楠哥最帅"} responseCallback:^(id responseData) {
NSError *parseError = nil;
NSData *jsonData = [NSJSONSerialization dataWithJSONObject:responseData options:NSJSONWritingPrettyPrinted error:&parseError];
NSString *message = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];
[[MyAlertView alertViewWithTitle:@"OC的弹框-OC调用getJS" message:message onBtnClicked:^(int btnIndex) {
} cancelButtonTitle:@"确定" otherButtonTitles:nil] show];
NSLog(@"-------------从JS接收的数据: %@", responseData);
}];
}
JS端
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style type='text/css'>
html { color:#000; }
h1 { font-size:24px; margin-top:24px; }
#id,#ids{ margin:0 3px 10px; font:15px/50px 微软雅黑;height: 50px;text-align: center }
#ids{background-color: #000;color: #fff;}
#id{color: #000;}
</style>
</head>
<body>
<h1>IOS与H5交互</h1>
<div id='id'></div>
<div id='ids'>JS调OC</div>
<script>
/*这段代码是固定的，必须要放到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交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS*/
setupWebViewJavascriptBridge(function(bridge) {
/*OC调用JS*/
bridge.registerHandler('getJS', function (data, responseCallback) {
document.getElementById('id').innerHTML = 'OC调JS得到' + JSON.stringify(data)
responseCallback({'来自JS的数据': 'getJS'})
})
/*JS调OC*/
document.getElementById('ids').onclick = function () {
bridge.callHandler('getOC',{'来自JS的数据': 'getOC'}, function(responseData) {
alert('来自OC的数据' + JSON.stringify(responseData))
})
}
})
</script>
</body>
</html>
效果图
OC的信息提示-getJS
OC的信息提示-getJS.png
JS的信息提示-getOC
JS的信息提示-getOC.png
OC的信息提示-getOC
OC的信息提示-getOC.png
