博文參考：

鏈接1： iOS與網(wǎng)頁JS交互,3中方法實現(xiàn)
鏈接2：IOS中 使用JavaScriptCore 實現(xiàn)OC與JS的交互
鏈接3：WebViewJavascriptBridge的基本原理

我要實現(xiàn)的功能：

給web頁傳入經(jīng)緯度和城市名字，顯示出該城市的地鐵線路圖，效果如下

實現(xiàn)過程

這里實現(xiàn)OC與JS的交互使用的是第三方：WebViewJavascriptBridge，簡單方便，既然是第三方，那么使用cocoapods導(dǎo)入最方便
1.準(zhǔn)備工作
首先新建工程，使用cocoapods導(dǎo)入WebViewJavascriptBridge

platform :ios,'10.0'
target 'OCAndJS’ do
 pod "WebViewJavascriptBridge",'~>5.0.5'
end

然后在需要使用的第三方API的地方引入頭文件

#import <WebViewJavascriptBridge/WebViewJavascriptBridge.h>

最后將H5界面對應(yīng)的文件拖入到工程中

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;//橋接對象

開啟橋接對象，關(guān)聯(lián)OC和JS

    //js與oc交互傳值---打開方式WebViewJavascriptBridge
    [WebViewJavascriptBridge enableLogging];//開啟日志
    self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];// 給哪個webview建立JS與OjbC的溝通橋梁
    [_bridge setWebViewDelegate:self];//設(shè)置webView代理
    //js與oc交互傳值---OC給JS傳值
    [self.bridge callHandler:@"testJavascriptHandler" data:@{@"latitude":[NSNumber numberWithFloat:28.199439],@"lontitude":[NSNumber numberWithFloat:113.022366],@"cityName":@"長沙"}];
    //js與oc交互傳值---注冊接收從js傳傳過來的值的理者，唯一標(biāo)識是“ testObjcCallback”，與js中代碼相對應(yīng)
    [self.bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
        //這里面獲取在H5界面返回的值，在data中
        NSLog(@"%@",data);
        responseCallback(@"Response from testObjcCallback");//block里面的值可以傳到j(luò)s中去，可以不寫
    }];

3.JS代碼
首先是公共代碼

//與OC交互的所有JS方法都要放在此處注冊，才能調(diào)用通過JS調(diào)用OC或者讓OC調(diào)用這里的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();
            });

Demo下載地址