ios UIWebView调用本地html和javascript，并且和ios通讯

ios和android都提供了有关webview和javascript通讯的功能，这就使开发者根据手机的系统展示适合手机的界面，是界面开发更加简单。

我的原型主要实现通过UIWebView展示本地的html、css、javascript文件，并且和ios互相通讯，用来展示数据。

下面是我实现的一个简单demo，界面效果如下：

点击连接调用ios中的提醒功能：

实现过程：

• 首先创建一个工程，ipad.web1，编译运行成功。
• 实现webview的代码：

#import

@interface ipad_web1ViewController : UIViewController
{
    IBOutlet UIWebView *myWebView;
}
@property (nonatomic,retain) UIWebView *myWebView;
@end

相应的.m文件：

#import "ipad_web1ViewController.h"

@implementation ipad_web1ViewController
@synthesize myWebView;
- (void)viewDidLoad {
    [super viewDidLoad];
    self.myWebView.delegate=self;
    NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
    [myWebView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath: path]]];
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    return YES;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}

- (void)viewDidUnload {
    self.myWebView=nil;
}

- (void)dealloc {
    [self.myWebView release];
    [super dealloc];
}
#pragma mark –
#pragma mark UIWebViewDelegate
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
   if ( [request.mainDocumentURL.relativePath isEqualToString:@"/click/false"] ) {    
        NSLog( @"not clicked" );
        return false;
    }
    if ( [request.mainDocumentURL.relativePath isEqualToString:@"/click/true"] ) {        //the image is clicked, variable click is true
        NSLog( @"image clicked" );
        UIAlertView* alert=[[UIAlertView alloc]initWithTitle:@"JavaScript called"
                                                     message:@"You’ve called iPhone provided control from javascript!!" delegate:self cancelButtonTitle:@"Cancel" otherButtonTitles:nil];
        [alert show];
        [alert release];
        return false;
    }
    return true;
}
- (void)webViewDidStartLoad:(UIWebView *)webView
{
    NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
    NSLog(@"title11=%@",title);
}
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
    NSLog(@"title=%@",title);
    //添加数据
   [myWebView stringByEvaluatingJavaScriptFromString:@"var field = document.getElementById('field_2');"  
     "field.value='Multiple statements - OK';"];
    //[myWebView stringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script');"  
//     "script.type = 'text/javascript';"  
//     "script.text = \"function myFunction() { "  
//     "var field = document.getElementById('field_3');"  
//     "field.value='Calling function - OK';"  
//     "}\";"  
//     "document.getElementsByTagName('head')[0].appendChild(script);"];  
//    
//    [myWebView stringByEvaluatingJavaScriptFromString:@"myFunction();"];  
}
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
{
}
@end

• 最后在Interface Builder中添加UIwebView控件，并且和相应的实体相关联。

   NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
    NSLog(@"title=%@",title);

主要是获取html文件的title名字。

[myWebView stringByEvaluatingJavaScriptFromString:@"var field = document.getElementById('field_2');"  
     "field.value='Multiple statements - OK';"];

添加相应的表单信息。

• 接下来添加index.html文件：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

   
   
   
   
   
   
   
   
    < type="text/javascript" src="test.js">
  

测试

   click me
  

  
     


  
     


  
     


  
   

  

• 添加相应的css文件：

body {
    background-color: #F2F5A9;
}

• 添加相应的js文件：

function imageClicked(){
    var clicked=true;
    window.location="/click/"+clicked;
}

运行，点击连接应该不出相应的对话框，说明相应的javascript没有生效。修改办法是打开targets，点击ipad.web1，移动相应的test.js文件到下图即可。

  
源代码：http://easymorse-iphone.googlecode.com/svn/trunk/ipad.web1/