webview和js交互 --------WebViewJavascriptBridge

pod 集成工具

pod 'WebViewJavascriptBridge', '~> 6.0'

使用：

1. iOS代码

#import "WebViewJavascriptBridge.h"
@property (nonatomic,strong)WebViewJavascriptBridge* bridge;
- (WebViewJavascriptBridge *)bridge{
    if (!_bridge) {
        _bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
        [_bridge setWebViewDelegate:self.delegate];
    }
    return _bridge;
}
// 调用js方法(与js的 doHead 对应)
[self.bridge callHandler:@"doHead" data:value responseCallback:^(id responseData) {
        NSLog(@"%@ == %@",name,value);
        if (callBack) callBack(responseData);
    }];
// 添加一个js方法 (与js的 styleCallBack 对应)
[self.bridge registerHandler:@"styleCallBack" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"%@",[NSThread currentThread]);
        if (callBack) callBack(data);
    }];

2. 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 = 'https://__bridge_loaded__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
setupWebViewJavascriptBridge(function(bridge) {
                             bridge.registerHandler('doHead', function(data, responseCallback) {
                                                    var responseData = null;
                                                    window.doHead();
                                                    responseCallback(responseData);
                                                    })
}
window.styleCallBack = function(value){
    window.WebViewJavascriptBridge.callHandler('styleCallBack', value, function(response) {
        return editor.getFormat();
    });
}

进阶：简单的封装一个简单的管理类

#import 

// 负责通讯
@interface JavaScriptCoreManager : NSObject

/**
 webview 就是JavaScriptCoreManager 操作的webview 也支持wkwebview
 */
@property (nonatomic,assign)id webView;

/**
 运行时替换了webview的delegate 此处设置的是webview的delegate
 */
@property (nonatomic,assign) id delegate;


/**
 调用js的方法
 
 @param name 方法名
 @param value 参数
 @param callBack 返回值
 */
- (void)RunJSMethordByName:(NSString *)name
                  AndValue:(NSString *)value
               AndCallBack:(void(^)(NSString *result))callBack;


/**
 添加一个js方法

 @param name 方法名
 @param callBack 方法调用的回调
 */
- (void)addJSMethrdByName:(NSString *)name
              AndCallBack:(void(^)(NSString *result))callBack;

@end

#import "JavaScriptCoreManager.h"
#import "WebViewJavascriptBridge.h"

@interface JavaScriptCoreManager ()
@property (nonatomic,strong)WebViewJavascriptBridge* bridge;
@end
@implementation JavaScriptCoreManager

//调用js的方法
- (void)RunJSMethordByName:(NSString *)name
                  AndValue:(NSString *)value
               AndCallBack:(void(^)(NSString *result))callBack{
    [self.bridge callHandler:name data:value responseCallback:^(id responseData) {
        NSLog(@"%@ == %@",name,value);
        if (callBack) callBack(responseData);
    }];
}

// 添加一个js方法
- (void)addJSMethrdByName:(NSString *)name
              AndCallBack:(void(^)(NSString *result))callBack{
    [self.bridge registerHandler:name handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"%@",[NSThread currentThread]);
        if (callBack) callBack(data);
    }];
}
- (WebViewJavascriptBridge *)bridge{
    if (!_bridge) {
        _bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
        [_bridge setWebViewDelegate:self.delegate];
    }
    return _bridge;
}
@end

使用：

// 调用
 [self.jsManager RunJSMethordByName:@"doHead" AndValue:@"h2" AndCallBack:nil];
// 添加
 [self.jsManager addJSMethrdByName:@"styleCallBack" AndCallBack:^(NSString *type){
          // 回掉处理
 }];