博文参考：
链接1： iOS与网页JS交互,3中方法实现
链接2：IOS中 使用JavaScriptCore 实现OC与JS的交互
链接3：WebViewJavascriptBridge的基本原理
我要实现的功能：
给web页传入经纬度和城市名字，显示出该城市的地铁线路图，效果如下
实现过程
这里实现OC与JS的交互使用的是第三方：WebViewJavascriptBridge，简单方便，既然是第三方，那么使用cocoapods导入最方便
1.准备工作
首先新建工程，使用cocoapods导入WebViewJavascriptBridge
platform :ios,'10.0'
target 'OCAndJS’ do
pod "WebViewJavascriptBridge",'~>5.0.5'
end
然后在需要使用的第三方API的地方引入头文件
#import <WebViewJavascriptBridge/WebViewJavascriptBridge.h>
最后将H5界面对应的文件拖入到工程中
2.OC代码
首先添加webView，遵循UIWebViewDelegate
//添加webView
self.webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 20, kScreenWidth, kScreenHeight)];
self.webView.delegate = self;
[self.view addSubview:self.webView];
//加载H5页面
NSString *resoucePath = [[NSBundle mainBundle] resourcePath];
NSString * filePath = [resoucePath stringByAppendingPathComponent:@"index.html"];
NSString * html = [[NSString alloc] initWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
[self.webView loadHTMLString:html baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]];
添加OC和JS桥接对象
@property(nonatomic,strong)WebViewJavascriptBridge * bridge;//桥接对象
开启桥接对象，关联OC和JS
//js与oc交互传值---打开方式WebViewJavascriptBridge
[WebViewJavascriptBridge enableLogging];//开启日志
self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];// 给哪个webview建立JS与OjbC的沟通桥梁
[_bridge setWebViewDelegate:self];//设置webView代理
//js与oc交互传值---OC给JS传值
[self.bridge callHandler:@"testJavascriptHandler" data:@{@"latitude":[NSNumber numberWithFloat:28.199439],@"lontitude":[NSNumber numberWithFloat:113.022366],@"cityName":@"长沙"}];
//js与oc交互传值---注册接收从js传传过来的值的理者，唯一标识是“ testObjcCallback”，与js中代码相对应
[self.bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
//这里面获取在H5界面返回的值，在data中
NSLog(@"%@",data);
responseCallback(@"Response from testObjcCallback");//block里面的值可以传到js中去，可以不写
}];
3.JS代码
首先是公共代码
//与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的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)
}
绑定的弹出框事件
function bindEvent(){
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
city = data.cityName;
bdLng = data.lontitude;
bdLat = data.latitude;
window.cbk();
});
$('.js_start_tap').off('touchstart').on('touchstart', function(event) {
var name = $(this).attr('data-name');
bridge.callHandler('testObjcCallback', {'name':name, 'type':'start'}, function(response) {});
});
$('.js_end_tap').off('.touchstart').on('touchstart', function(event) {
var name = $(this).attr('data-name');
bridge.callHandler('testObjcCallback', {'name':name,'type':'end'}, function(response) {});
});
});
}
其中js传值到oc的代码
//这部分的代码写在H5中需要传值的操作处
bridge.callHandler('testObjcCallback', {'name':name,'type':'end'}, function(response) {});
而js获取oc中的值的代码
//写到合适的地方就可以
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
city = data.cityName;
bdLng = data.lontitude;
bdLat = data.latitude;
window.cbk();
});
