第一種方式

JS傳值給OC

1、技術方案：使用自定義url方法，每次點擊網頁
2、使用場景：比如點擊事件方法，點擊網頁的某個方法，將該方法的參數傳值給OC，供OC使用。
3、代碼實現如下：

一、js要實現的

1 、創建一個.js文件：

;(function() {
    var messagingIframe,
        bridge = 'external',
// wmcall是自定義的協議頭
        CUSTOM_PROTOCOL_SCHEME = 'wmcall';
    if (window[bridge]) { return }
    function _createQueueReadyIframe(doc) {
        messagingIframe = doc.createElement('iframe');
        messagingIframe.style.display = 'none';
        doc.documentElement.appendChild(messagingIframe);
    }
    window[bridge] = {};
    var methods = [%@];
    for (var i=0;i<methods.length;i++){
        var method = methods[i];
        var code = "(window[bridge])[method] = function " + method + "() {messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + ':' + arguments.callee.name + ':' + encodeURIComponent(JSON.stringify(arguments));}";
        eval(code);
    }
  
    //創建iframe，必須在創建external之后，否則會出現死循環
    _createQueueReadyIframe(document);
    //通知js開始初始化
    //initReady();
})();

二、oc要實現的代碼

2、創建文件WebViewJsBridge.h，繼承UIWebViewDelegate

#import <Foundation/Foundation.h>

#define kCustomProtocolScheme @"wmcall"
#define kBridgeName           @"external"

@interface WebViewJsBridge : NSObject<UIWebViewDelegate>

@property (nonatomic, weak) UIWebView *webView;

+ (instancetype)bridgeForWebView:(UIWebView*)webView webViewDelegate:(NSObject<UIWebViewDelegate>*)webViewDelegate;
+ (instancetype)bridgeForWebView:(UIWebView*)webView webViewDelegate:(NSObject<UIWebViewDelegate>*)webViewDelegate resourceBundle:(NSBundle*)bundle;

- (void)excuteJSWithObj:(NSString *)obj function:(NSString *)function;

@end

WebViewJsBridge.m

#import "WebViewJsBridge.h"
#import <objc/runtime.h>

@interface WebViewJsBridge ()

@property (nonatomic, weak) id webViewDelegate;
@property (nonatomic, weak) NSBundle *resourceBundle;

@end

@implementation WebViewJsBridge

+ (instancetype)bridgeForWebView:(UIWebView*)webView webViewDelegate:(NSObject<UIWebViewDelegate>*)webViewDelegate {
    return [self bridgeForWebView:webView webViewDelegate:webViewDelegate resourceBundle:nil];
}

+ (instancetype)bridgeForWebView:(UIWebView*)webView webViewDelegate:(NSObject<UIWebViewDelegate>*)webViewDelegate resourceBundle:(NSBundle*)bundle
{
    WebViewJsBridge* bridge = [[[self class] alloc] init];
    [bridge _platformSpecificSetup:webView webViewDelegate:webViewDelegate resourceBundle:bundle];
    return bridge;
}

#pragma mark - init & dealloc

- (void) _platformSpecificSetup:(UIWebView*)webView webViewDelegate:(id<UIWebViewDelegate>)webViewDelegate resourceBundle:(NSBundle*)bundle{
    _webView = webView;
    _webViewDelegate = webViewDelegate;
    _webView.delegate = self;
    _resourceBundle = bundle;
}

- (void)dealloc {
    _webView.delegate = nil;
    _webView = nil;
    _webViewDelegate = nil;
}

#pragma mark - UIWebView Delegate

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    if (webView != _webView) { return; }
    //is js insert
    if (![[webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"typeof window.%@ == 'object'", kBridgeName]] isEqualToString:@"true"]) {
        //get class method dynamically
        unsigned int methodCount = 0;
        Method *methods = class_copyMethodList([self class], &methodCount);
        NSMutableString *methodList = [NSMutableString string];
        for (int i=0; i<methodCount; i++) {
            NSString *methodName = [NSString stringWithCString:sel_getName(method_getName(methods[i])) encoding:NSUTF8StringEncoding];
            //防止隱藏的系統方法名包含“.”導致js報錯
            if ([methodName rangeOfString:@"."].location!=NSNotFound) {
                continue;
            }
            [methodList appendString:@"\""];
            [methodList appendString:[methodName stringByReplacingOccurrencesOfString:@":" withString:@""]];
            [methodList appendString:@"\","];
        }
        if (methodList.length>0) {
            [methodList deleteCharactersInRange:NSMakeRange(methodList.length-1, 1)];
        }
        free(methods);
        NSBundle *bundle = _resourceBundle ? _resourceBundle : [NSBundle mainBundle];
        NSString *filePath = [bundle pathForResource:@"WebViewJsBridge" ofType:@"js"];
        NSString *js = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
        [webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:js, methodList]];
    }
    
    __strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate;
    if (strongDelegate && [strongDelegate respondsToSelector:@selector(webViewDidFinishLoad:)]) {
        [strongDelegate webViewDidFinishLoad:webView];
    }
}

- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
    if (webView != _webView) { return; }
    
    __strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate;
    if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:didFailLoadWithError:)]) {
        [strongDelegate webView:webView didFailLoadWithError:error];
    }
}

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    if (webView != _webView) { return YES; }

    NSURL *url = [request URL];
    __strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate;
    // 拿到網頁的實時url
    NSString *requestString = [[request URL] absoluteString];
//在url中尋找自定義協議頭"wmcall"
    if ([requestString hasPrefix:kCustomProtocolScheme]) {
// 以":"為中心將url分割成兩部分，放進數組arr。。是否取“:”或者“://”需要跟寫交互的確定下
        NSArray *components = [[url absoluteString] componentsSeparatedByString:@":"];
        // 取其后半段
        NSString *function = (NSString*)[components objectAtIndex:1];
        NSString *argsAsString = [(NSString*)[components objectAtIndex:2]
                                  stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
        NSData *argsData = [argsAsString dataUsingEncoding:NSUTF8StringEncoding];
        NSDictionary *argsDic = (NSDictionary *)[NSJSONSerialization JSONObjectWithData:argsData options:kNilOptions error:NULL];
//以":"為標識將后半段url分割成若干部分，放進數組arr2，此時arr2[0]為空，arr2[1]為第一個傳參值，arr2[2]為第二個傳參值，以此類推
        //convert js array to objc array
        NSMutableArray *args = [NSMutableArray array];
//取出參數，進行使用
        for (int i=0; i<[argsDic count]; i++) {
            [args addObject:[argsDic objectForKey:[NSString stringWithFormat:@"%d", i]]];
        }
        //ignore warning
#pragma clang diagnostic ignored "-Warc-performSelector-leaks"
        SEL selector = NSSelectorFromString([args count]>0?[function stringByAppendingString:@":"]:function);
        if ([self respondsToSelector:selector]) {
            [self performSelector:selector withObject:args];
        }
        return NO;
    } else if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)]) {
        return [strongDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
    } else {
        return YES;
    }
}

- (void)webViewDidStartLoad:(UIWebView *)webView {
    if (webView != _webView) { return; }
    
    __strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate;
    if (strongDelegate && [strongDelegate respondsToSelector:@selector(webViewDidStartLoad:)]) {
        [strongDelegate webViewDidStartLoad:webView];
    }
}

#pragma mark - call js

//執行js方法
- (void)excuteJSWithObj:(NSString *)obj function:(NSString *)function {
    NSString *js = function;
    if (obj) {
        js = [NSString stringWithFormat:@"%@.%@", obj, function];
    }
    [self.webView stringByEvaluatingJavaScriptFromString:js];
}


@end

三、使用案例

1、創建橋接文件WebViewJsBridge.h
.h

#import "WebViewJsBridge.h"

typedef void(^bridge_callback)(NSString* method, NSArray* params);

@interface BeeWebViewBridge : WebViewJsBridge
@property (nonatomic, strong) bridge_callback block_bridge_callback;
- (void)setBlock_bridge_callback:(bridge_callback)block_bridge_callback;
- (void)check_exist;
@end

#import "BeeWebViewBridge.h"
@implementation BeeWebViewBridge
//圖片展示
- (void)show_image:(NSArray *)params
{
    if(_block_bridge_callback)
    {
        _block_bridge_callback(@"show_image", params);
    }
}
@end

oc傳值給js

在webviewcontroller里面實現如下代碼：

//通過paramsName，匹配需要傳什么值
- (void)callByValueWithParamsName:(NSString *)paramsName
{
    //要傳出去的值
    NSString *value = @"";
    if ([paramsName isEqualToString:@"access_token"]) {
        value = [CMCore get_access_token]?:@"";
    }
    //方法1
    NSString *jsMethode = [NSString stringWithFormat:@"set_params('%@')",value];
    [_web_view stringByEvaluatingJavaScriptFromString:jsMethode];
    //方法2
    //        NSString *jsMethode = [NSString stringWithFormat:@"set_params('%@')",value];
    //        JSContext *context = [_web_view valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    //        [context evaluateScript:jsMethode];
    //方法3
    //  [_bridge excuteJSWithObj:value function:paramsName];
}

分割線

第二種：利用第三方庫實現JS與OC的相互傳值。

原作者鏈接

1、技術方案：使用WebViewJavascriptBridge三方庫
2、使用場景：網頁中代碼中的某個方法，比如點擊事件方法，將該方法的參數傳值給OC，供OC使用。
3、代碼實現如下：

oc給js傳值

一、 JS里需要實現的代碼(創建.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)
    }

    //調用上面定義的函數
    setupWebViewJavascriptBridge(function (bridge){

        //OC傳值給JS 'testJavascriptHandler'為雙方自定義好的統一方法名；'data'是OC傳過來的值；'responseCallback'是JS接收到之后給OC的回調
        bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
                //打印OC傳過來的值
                log('ObjC called testJavascriptHandler with', data)

                var responseData = { 'Javascript Says':'Right back atcha!' }

                log('JS responding with', responseData)

                //給OC的回調
                responseCallback(responseData)

            })

二、OC里需要實現的代碼：

1、導入第三方庫 WebViewJavascriptBridge；遵守UIWebViewDelegate協議；

 //設置第三方Bridge是否可用
    [WebViewJavascriptBridge enableLogging];

    //關聯webView和bridge
    _bridge = [WebViewJavascriptBridge bridgeForWebView:web];

    [_bridge setWebViewDelegate:self];

    //OC給JS傳值，雙方自定義一個統一的方法名'testJavascriptHandler'；data里即為要傳過去的值
    [_bridge callHandler:@"testJavascriptHandler" data:@{@"年齡":@"20"}];

js給oc傳值

一、創建js文件，js代碼如下:


//點擊網頁上一個按鈕時
     callbackBt.onclick = function()
     {  
     var str1=document.getElementById("text1").value;
     var str2=document.getElementById("text2").value;

     //JS給OC傳值。'passValue'為雙方自定義的統一方法名；'str1'&'str2'為要傳的值； response為OC收到后給JS的回調
     bridge.callHandler('passValue', {str1,str2}, function(response) {
                                })

     }

二、oc要實現的代碼

導入第三方庫 WebViewJavascriptBridge；遵守UIWebViewDelegate協議；

//設置第三方Bridge是否可用
    [WebViewJavascriptBridge enableLogging];

    //關聯webView和bridge
    _bridge = [WebViewJavascriptBridge bridgeForWebView:web];

    [_bridge setWebViewDelegate:self];

    //js給oc傳值.'passValue'為雙方自定義的統一方法名；'data'為JS傳過來的值；'responseCallback'為OC收到值后給JS返回的回調
    [_bridge registerHandler:@"passValue" handler:^(id data, WVJBResponseCallback responseCallback) {

        //打印js傳過來的值
        NSLog(@"%@", data);

        //返回給js的值
        responseCallback(@"收到了");
    }];

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

WebView和JS交互

WebView和JS交互

第一種方式

JS傳值給OC

一、js要實現的

二、oc要實現的代碼

三、使用案例

oc傳值給js

第二種：利用第三方庫實現JS與OC的相互傳值。

oc給js傳值

一、 JS里需要實現的代碼(創建.js文件)：

二、OC里需要實現的代碼：

js給oc傳值

一、創建js文件，js代碼如下:

二、oc要實現的代碼

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

WebView和JS交互

第一種方式

JS傳值給OC

一、js要實現的

二、oc要實現的代碼

三、使用案例

oc傳值給js

第二種：利用第三方庫實現JS與OC的相互傳值。

oc給js傳值

一、 JS里需要實現的代碼(創建.js文件)：

二、OC里需要實現的代碼：

js給oc傳值

一、創建js文件，js代碼如下:

二、oc要實現的代碼

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频