接上篇文章，上篇文章实现了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
