iOS-JS交互 (WebViewJavascriptBridge)

//
//   ViewController.m
//   JSAndIOS交互
//
//   Created by apple on 15/7/31.
//   Copyright (c) 2015年 tqh. All rights reserved.
//

#import  " ViewController.h "
#import  " WebViewJavascriptBridge.h "
@interface ViewController ()<UIWebViewDelegate>
@property WebViewJavascriptBridge* bridge;
@end

@implementation ViewController

- ( void)viewDidLoad {
    [super viewDidLoad];
     if (_bridge) {  return; }
    
    UIWebView* webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:webView];
    
    [WebViewJavascriptBridge enableLogging];
    
     // 網頁交互，網頁發送消息給程序
    _bridge = [WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^( id data, WVJBResponseCallback responseCallback) {
        NSLog( @" 從JS收到消息: %@ ", data);
        responseCallback( @" back ");
    }];
     // 網頁交互，網頁發送消息給程序
    [_bridge registerHandler: @" testObjcCallback " handler:^( id data, WVJBResponseCallback responseCallback) {
        NSLog( @" testObjcCallback called: %@ ", data);
        responseCallback( @" back ");
    }];
    [self renderButtons:webView];
    [self loadExamplePage:webView];
}

- ( void)renderButtons:(UIWebView*)webView {
    UIFont* font = [UIFont fontWithName: @" HelveticaNeue " size: 12.0];
    
    UIButton *messageButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [messageButton setTitle: @" 發送消息 " forState:UIControlStateNormal];
    [messageButton addTarget:self action:@selector(sendMessage:) forControlEvents:UIControlEventTouchUpInside];
    [self.view insertSubview:messageButton aboveSubview:webView];
    messageButton.frame = CGRectMake( 10,  414,  100,  35);
    messageButton.titleLabel.font = font;
    messageButton.backgroundColor = [UIColor colorWithWhite: 1 alpha: 0.75];
    
    UIButton *callbackButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [callbackButton setTitle: @" 調用處理程序 " forState:UIControlStateNormal];
    [callbackButton addTarget:self action:@selector(callHandler:) forControlEvents:UIControlEventTouchUpInside];
    [self.view insertSubview:callbackButton aboveSubview:webView];
    callbackButton.frame = CGRectMake( 110,  414,  100,  35);
    callbackButton.titleLabel.font = font;
    
    UIButton* reloadButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [reloadButton setTitle: @" 從新加載webview " forState:UIControlStateNormal];
    [reloadButton addTarget:webView action:@selector(reload) forControlEvents:UIControlEventTouchUpInside];
    [self.view insertSubview:reloadButton aboveSubview:webView];
    reloadButton.frame = CGRectMake( 210,  414,  100,  35);
    reloadButton.titleLabel.font = font;
}


// 加載網頁
- ( void)loadExamplePage:(UIWebView*)webView {
     // ExampleApp加載本地網頁
    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];
}

#pragma mark - 事件監聽

- ( void)sendMessage:( id)sender {
     // 發送消息
    [_bridge send: @" oc發送消息 " responseCallback:^( id response) {
        NSLog( @" sendMessage got response: %@ ", response);
    }];
}

- ( void)callHandler:( id)sender {
     // 發送消息
     id data = @{  @" name ":  @" value " };
    [_bridge callHandler: @" testJavascriptHandler " data:data responseCallback:^( id response) {
        NSLog( @" testJavascriptHandler responded: %@ ", response);
    }];
}

#pragma mark - UIWebViewDelegate

- ( void)webViewDidStartLoad:(UIWebView *)webView {
    NSLog( @" webViewDidStartLoad ");
}

- ( void)webViewDidFinishLoad:(UIWebView *)webView {
    NSLog( @" webViewDidFinishLoad ");
}
@end

 github下載：https://github.com/marcuswestin/WebViewJavascriptBridge

 百度雲下載：http://pan.baidu.com/s/1kTnbpTd

 js學習：http://www.w3school.com.cn/

 http://www.fenesky.com/blog/2014/04/24/how-javascriptcore-works.html

 http://www.cnblogs.com/ider/p/introduction-to-ios7-javascriptcore-framework.html 

 webkit學習：http://blog.csdn.net/column/details/webkit-in-deep.html