UIWebView与javascript交互二通过页面的响应事件获取页面输入框内的值

接上篇文章，上篇文章实现了UIwebview对html文件的加载和对js事件的响应，但是对html页面上输入的值没有获取。

今天就来说说这个首先要用到工具类WebViewJavascriptBridge 下载地址 然后将工具类导入到项目中。

其中test.js我做了如下的调整：

window.onerror = function(err) {
    log(‘window.onerror: ‘ + err)
}

function connectWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
        callback(WebViewJavascriptBridge)
    } else {
        document.addEventListener(‘WebViewJavascriptBridgeReady‘, function() {
            callback(WebViewJavascriptBridge)
        }, false)
    }
}

function check(){
    connectWebViewJavascriptBridge(function(bridge) {
        bridge.init(function(message, responseCallback) {
            log(‘JS got a message‘, message)
            var data = { ‘Javascript Responds‘:‘Wee!‘ }
            log(‘JS responding with‘, data)
            responseCallback(data)
        })

        bridge.registerHandler(‘testJavascriptHandler‘, function(data, responseCallback) {
            log(‘ObjC called testJavascriptHandler with‘, data)
            var responseData = { ‘Javascript Says‘:‘Right back atcha!‘ }
            log(‘JS responding with‘, responseData)
            responseCallback(responseData)
        })

        var str = document.getElementById(‘input1‘).value;//获取输入框的内容

        bridge.callHandler(‘submit‘, str, function(response) {
            log(‘JS got response‘, response)
        })//将输入框的内容通过回调 传给OC页面。实现交互

    })

}

另外对ViewController.m的内容作了如下修改：

//
//  ViewController.m
//  HTML5Demo
//
//  Created by Jack on 15/3/27.
//  Copyright (c) 2015年 Jack. All rights reserved.
//

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

@implementation ViewController

@synthesize myWebView;
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    myWebView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 70, self.view.frame.size.width, self.view.frame.size.height-100)];
    myWebView.delegate =self;
    [self.view addSubview:myWebView];

}

- (void)viewWillAppear:(BOOL)animated {
    if (_bridge) { return; }

    [WebViewJavascriptBridge enableLogging];

    _bridge = [WebViewJavascriptBridge bridgeForWebView:myWebView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"ObjC received message from JS: %@", data);

    }];

    [_bridge registerHandler:@"submit" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"submit called: %@", data);//data就是submit被触发后传递过来的数据

    }];

//    [_bridge send:@"A string sent from ObjC before Webview has loaded." responseCallback:^(id responseData) {
//        NSLog(@"objc got response! %@", responseData);
//    }];
//
//    [_bridge callHandler:@"testJavascriptHandler" data:@{ @"foo":@"before ready" }];
//
//
//
//    [_bridge send:@"A string sent from ObjC after Webview has loaded."];
    NSString *path = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"html"];
    [myWebView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath: path]]];

}

#pragma mark UIWebViewDelegate
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

    return true;
}
- (void)webViewDidStartLoad:(UIWebView *)webView
{
    NSLog(@"开始网页");
}
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
    NSLog(@"title=%@",title);
    //NSString *st = [ webView stringByEvaluatingJavaScriptFromString:@"document.getElementById(‘field_1‘).value"];
    NSString *st = [webView stringByEvaluatingJavaScriptFromString:@"document.forms[0][‘input1‘].value"];
    NSLog(@"input1 =%@",st);

}
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
{
    NSLog(@"error %@",error);
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

别的页面都没有改变。下面就开始运行吧运行结果如下：

终于可以交互了，哈哈，在接下来的文章中将会和大家一块学习通过OC页面传值到html页面中。

作为一名菜鸟在这一块希望大家多多给予指导哦。^_^

差点忘了，这里可以下载代码：demo