UIWebView 调用本地 html 和 javascript 的教程

最新推荐文章于 2024-05-03 11:47:20 发布

a283127993

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量792

点赞数

分类专栏： ios 开发文章标签： javascript html function interface iphone input

ios 开发专栏收录该内容

48 篇文章 0 订阅

订阅专栏

iOS 提供了有关 webview 和 javascript 通讯的功能，这就使开发者根据手机的系统展示适合手机的界面，是界面开发更加简单。本教程的原型主要实现通过 UIWebView 展示本地的 html、css、java

本文转自 http://wangjun.easymorse.com/?p=1087

iOS 提供了有关 webview 和 javascript 通讯的功能，这就使开发者根据手机的系统展示适合手机的界面，是界面开发更加简单。本教程的原型主要实现通过 UIWebView 展示本地的 html、css、javascript 文件，并且和 iOS 互相通讯，用来展示数据。界面效果如下：

点击连接调用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 文件到下图即可。

a283127993

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
UIWebView 调用本地 html 和 javascript 的教程

iOS 提供了有关 webview 和 javascript 通讯的功能，这就使开发者根据手机的系统展示适合手机的界面，是界面开发更加简单。本教程的原型主要实现通过 UIWebView 展示本地的 html、css、java本文转自 http://wangjun.easymorse.com/?p=1087 iOS 提供了有关 webview 和 javascrip
复制链接

扫一扫