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

最新推荐文章于 2025-06-20 11:41:16 发布

最新推荐文章于 2025-06-20 11:41:16 发布 · 73 阅读

文章标签：

#javascript #移动开发 #xhtml #ViewUI

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

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

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

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

实现过程：

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

#import <uikit></uikit>

@interface ipad_web1ViewController : UIViewController
<uiwebviewdelegate>{<br style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif;"> IBOutlet UIWebView *myWebView;<br style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif;"> }<br style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif;"> @property (nonatomic,retain) UIWebView *myWebView;<br style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif;"> @end</uiwebviewdelegate>

相应的.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文件：

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif; color: #0071BB; outline-style: none; outline-width: initial; outline-color: initial;">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
How to build an iPhone website
<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"><br style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif;" /> <strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif;">@import url("layout.css");<br style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif;" /></strong> </style>
<script type="text/javascript" src="test.js"></script>

测试

click me