UIWebView加载本地HTML5文件
发布日期:2021-06-30 15:55:18 浏览次数:3 分类:技术文章

本文共 7602 字,大约阅读时间需要 25 分钟。

一.准备HTML文件及其资源文件

使用UIWebView加载本地的HTML文件 index.html,在index.html中引用了本地的图片、CSS文件、JS文件以及外部的图片。

内容如下

            

HTML中会显示3张图片,第一张是html从本地读取的图片,第二张是通过CSS从本地读取的图片,第三张是通过绝对地址从外部读取的图片。

文件内容如下:

body {    padding: 0px;    margin: 0px;}p {    font-size: 15px;    color: #808080;    font-family: Arial, Helvetica, sans-serif;}  #myimage {    background-image: url(SmallSmiley.png);    background-repeat: repeat-x;}

文件内容为:

function rewrite(){    document.write("This text was written by an external script!")}

还有引用到了两个本地图片文件:

二.加载本地HTML文件

将html文件及相关资源添加到项目中

需要注意的是,把js文件加入到项目时会默认将其当做需要编译的代码,需要在TARGETS->Build Phases中的”Compile Sources”中找到该js文件,并将其移到上面的Copy Bundle Resources中。

然后在代码中可以用两种方法加载。

1.第一种方式,使用方法加载本地文件

NSString* path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];NSURL* url = [NSURL fileURLWithPath:path];NSURLRequest* request = [NSURLRequest requestWithURL:url] ;[webView loadRequest:request];

2.第二种方式,使用加载HTML字符串

NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];NSString *html = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];[webView loadHTMLString:html baseURL:baseURL];

加载后的显示效果如下,本地图片,CSS加载的本地图片,以及外部图片都可以正常显示。

在HTML页面加载完毕后,我们可以使用的方法执行javascript语句。如下:

- (void)webViewDidFinishLoad:(UIWebView *)webView{    [webView stringByEvaluatingJavaScriptFromString:@"rewrite();"];}

执行js代码后,页面显示就变成了

三.关于baseURL

方法的第二个参数是baseURL,baseURL即HTML字符串中引用到资源的查找路径,没有引用外部资源时,可以直接传nil;若引用了外部资源,一般情况下使用mainBundle的路径即可,即

NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];

这是因为,Xcode项目中的文件路径都是虚拟的,在APP中实际不存在,即在APP中,几乎所有的文件都可以从mainBundle根目录下直接访问,当然,例外总是存在的。

在将文件/文件夹加入到项目时,有这样两个选项“Create Folder References for any added folders”和“Recursively create groups for any added folders”。

默认情况下为第一种,即所有加入到项目的文件都会在mainBundle根路径下,即不管加入项目的文件的目录结构如何,在APP中都可以通过mainBundlePath/filename来访问到;如果采用第二种方式,则就会保留相对路径,需要通过mainBundlePath/path/filename来访问。通过这两种方式到项目的文件夹显示具有不同的颜色,如下
images1目录是使用“Create Folder References for any added folders”增加的目录,images2目录是使用“Recursively create groups for any added folders”增加的目录。

获取images1目录下文件的代码如下:

NSString* image1Path = [[NSBundle mainBundle] pathForResource:@"image1"ofType:@"jpg"];NSString* image11Path = [[NSBundle mainBundle] pathForResource:@"image11"ofType:@"jpg"];

images1和images11目录实际是不存在的,下面代码返回的路径都是nil

NSString* images1Dir = [[NSBundle mainBundle] pathForResource:@"images1"ofType:nil];NSString* images11Dir = [[NSBundle mainBundle] pathForResource:@"images11"ofType:nil];

对于images2目录以及目录下的文件路径,其在APP中仍然保持了目录关系,就不能用上述方法获取,而且目录路径是真实存在的,应该使用的代码如下:

NSString* images2Path = [[NSBundle mainBundle] pathForResource:@"image2"ofType:@"jpg"inDirectory:@"images2"];NSString* image22Path = [[NSBundle mainBundle] pathForResource:@"image22"ofType:@"jpg"inDirectory:@"images2/images22"];NSString* images2Dir = [[NSBundlemainBundle] pathForResource:@"images2"ofType:nil];NSString* images2Dir = [[NSBundle mainBundle] pathForResource:@"images22"ofType:nilinDirectory:@"images2"];

还有一种比较特殊的目录是以.bundle为后缀的目录,将其加入到项目是不管选择的是哪个选项,其都会保持其目录结构。

对子bundle的访问,可以通过同images2目录相同的方法访问,但一般情况下是先获取到子Bundle,再通过子Bundle获取到其里面的资源。

NSBundle *bundle = [NSBundle bundleWithPath:[[NSBundle mainBundle] pathForResource:@"images" ofType:@"bundle"]];NSString* imagebPath = [bundle pathForResource:@"imageb"ofType:@"jpg"];NSString* imagebbPath = [bundle pathForResource:@"imagebb"ofType:@"jpg" inDirectory:@"imagesb"];
 
 
 ios和android都提供了有关webview和javascript通讯的功能,这就使开发者根据手机的系统展示适合手机的界面,是界面开发更加简单。 我的原型主要实现通过UIWebView展示本地的html、css、javascript文件,并且和ios互相通讯,用来展示数据。 下面是我实现的一个简单demo,界面效果如下: 点击连接调用ios中的提醒功能: 实现过程:   
首先创建一个工程,.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:@" 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文件:
     
How to build an iPhone website    
    
    
    
    
    
    
      

测试

   
click me
   
       
       
       
     
   
添加相应的css文件:
body {     background-color: #F2F5A9; }
添加相应的js文件:
function imageClicked(){     var clicked=true;     window.location="/click/"+clicked; }
运行,点击连接应该不出相应的对话框,说明相应的javascript没有生效。修改办法是打开targets,点击ipad.web1,移动相应的test.js文件到下图即可。   源代码:
 

转载地址:https://kaitiren.blog.csdn.net/article/details/17115085 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:ARC/OC对象自动管理内存
下一篇:iOS 也玩黑苹果,开发者已经将 iOS 底层内核成功运行在诺基亚机子上

发表评论

最新留言

路过按个爪印,很不错,赞一个!
[***.219.124.196]2024年04月23日 03时02分14秒