簡介

iOS 中經(jīng)常會(huì)出現(xiàn)webview與原生交互的問題，這里給大家分享一個(gè)很好用的第三方框架及使用方法。
WebViewJavascriptBridge

初始化Bridge

import "WebViewJavascriptBridge.h"

@property WebViewJavascriptBridge* bridge;

if (_bridge) { return; }
[WebViewJavascriptBridge enableLogging];    
_bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
[_bridge setWebViewDelegate:self];

JS調(diào)用OC OC中實(shí)現(xiàn)代碼

/*
 含義：JS調(diào)用OC
 @param registerHandler 要注冊的事件名稱(比如這里我們?yōu)閘oginAction)
 @param handel 回調(diào)block函數(shù) 當(dāng)后臺(tái)觸發(fā)這個(gè)事件的時(shí)候會(huì)執(zhí)行block里面的代碼
 */
[_bridge registerHandler:@"loginAction" handler:^(id data, WVJBResponseCallback responseCallback) {
    // data js頁面?zhèn)鬟^來的參數(shù)  假設(shè)這里是用戶名和姓名，字典格式
    NSLog(@"JS調(diào)用OC，并傳值過來");
    
    // 利用data參數(shù)處理自己的邏輯
    NSDictionary *dict = (NSDictionary *)data;
    NSString *str = [NSString stringWithFormat:@"用戶名：%@  姓名：%@",dict[@"userId"],dict[@"name"]];
    
    
    // responseCallback 給后臺(tái)的回復(fù)
    responseCallback(@"報(bào)告，oc已收到j(luò)s的請求");
}];

OC調(diào)用JS OC中實(shí)現(xiàn)方法

/*
 含義：OC調(diào)用JS
 @param callHandler 商定的事件名稱,用來調(diào)用網(wǎng)頁里面相應(yīng)的事件實(shí)現(xiàn)
 @param data id類型,相當(dāng)于我們函數(shù)中的參數(shù),向網(wǎng)頁傳遞函數(shù)執(zhí)行需要的參數(shù)
 注意，這里callHandler分3種，根據(jù)需不需要傳參數(shù)和需不需要后臺(tái)返回執(zhí)行結(jié)果來決定用哪個(gè)
 */

//[_bridge callHandler:@"registerAction" data:@"我是oc請求js的參數(shù)"];
[_bridge callHandler:@"registerAction" data:@"uid:123 pwd:123" responseCallback:^(id responseData) {
    NSLog(@"oc請求js后接受的回調(diào)結(jié)果：%@",responseData);
}];

加載本地html

- (void)loadExamplePage:(UIWebView*)webView {
  NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"ExampleApp" ofType:@"html"];
  NSString* appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
  NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
  [webView loadHTMLString:appHtml baseURL:baseURL];
}

在JS里復(fù)制這個(gè)

<!-- 申明交互 -->
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 = 'https://__bridge_loaded__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}


<!-- 處理交互  方法名要和ios內(nèi)定義的對應(yīng)-->

setupWebViewJavascriptBridge(function(bridge) {

    <!--處理 oc 調(diào)用 js -->
    bridge.registerHandler('registerAction', function(data, responseCallback) {
        //處理oc給的傳參
        alert('oc請求js  傳值參數(shù)是：'+data)
                           
        var responseData = { 'result':'handle success' }
        //處理完，回調(diào)傳值給oc
        responseCallback(responseData)
    })


    var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
    callbackButton.innerHTML = '點(diǎn)擊我，我會(huì)調(diào)用oc的方法'
    callbackButton.onclick = function(e) {
        e.preventDefault()
                             
        <!--處理 js 調(diào)用 oc -->
        bridge.callHandler('loginAction', {'userId':'zhangsan','name': '章三'}, function(response) {
             //處理oc過來的回調(diào)
             alert('收到oc過來的回調(diào):'+response)
        })
}