本文转自 http://wangjun.easymorse.com/?p=1087
iOS 提供了有关 webview 和 javascript 通讯的功能,这就使开发者根据手机的系统展示适合手机的界面,是界面开发更加简单。本教程的原型主要实现通过 UIWebView 展示本地的 html、css、javascript 文件,并且和 iOS 互相通讯,用来展示数据。界面效果如下:
实现过程:
- 首先创建一个工程,ipad.web1,编译运行成功。
- 实现 webview 的代码:
#import <UIKit/UIKit.h>
@interface ipad_web1ViewController : UIViewController
<UIWebViewDelegate>{
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 文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to build an iPhone website</title>
<meta name="author" content="will" />
<meta name="copyright" content="copyright 2008 www.engageinteractive.co.uk" />
<meta name="description" content="Welcome to engege interactive on the iPhone!" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<link rel="apple-touch-icon" href="images/template/engage.png"/>
<style type="text/css">
@import url("layout.css");
</style>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>测试</h1>
<center><a href="javascript:void(0)" onMouseDown="imageClicked()">click me</a></center>
<form>
<input id="field_1" type="text" name="value" /><br/><br/><br/>
<input id="field_2" type="text" name="value" /><br/><br/><br/>
<input id="field_3" type="text" name="value" /><br/><br/><br/>
</form>
</body>
</html>
- 添加相应的 css 文件:
body {
background-color: #F2F5A9;
}
- 添加相应的 js 文件:
function imageClicked(){
var clicked=true;
window.location="/click/"+clicked;
}
运行,点击连接应该不出相应的对话框,说明相应的 javascript 没有生效。修改办法是打开 targets,点击 ipad.web1,移动相应的 test.js 文件到下图即可。