您的位置:时时app平台注册网站 > 编程知识 > 关于iOS开拓加载本地html 图片等能源路径难点

关于iOS开拓加载本地html 图片等能源路径难点

2019-09-19 06:43

第两种是相对路线 文件夹拖入为深蓝NSU凯雷德L*fileURL = [[NSBundle mainBundle] URLForResource:@"file/index.html"withExtension:nil];file为本地html所在文书夹本地html中加载图片,js,css资源也应有使用相对路线如 <script type="text/javascript" src="js/index.js"></script>

UIWebView加载本地HTML5文本
一.预备HTML文件及其能源文件
行使UIWebView加载本地的HTML文件 index.html,在index.html中援用了地面的图片、CSS文件、JS文件以及外界的图纸。index.html剧情如下
<html> <head> <link href="index.css" rel="stylesheet" type="text/css"> <script type="text/javascript"language="javascript"src="index.js"> </head> <body> <p>This is local Image</p>

/private/var/mobile/Containers/Bundle/Application/871B4041-5CCE-4C94-935C-16C6C31D62B9/OcSwift.app/www/index.html

图片 152907F77-2E9A-496D-8F35-599672E431FD.png

福衢寿车进度:
率先成立三个工程,ipad.web1,编写翻译运营成功。
实现webview的代码:

html文件在www文件下,然后打字与印刷html文件的欧洲经济共同体路径:
/private/var/mobile/Containers/Bundle/Application/043B3B79-E397-4913-9B44-CBBC12A00FA5/OcSwift.app/index.html
index.html那个文件前边未有www文件路线,那是因为编写翻译器打包时去掉了那一个文件夹,所以js的不二秘诀产生了
/private/var/mobile/Containers/Bundle/Application/043B3B79-E397-4913-9B44-CBBC12A00FA5/OcSwift.app/index.js
引用js文件时,使用<script type="text/javascript" src="js/index.js"></script> 就能够找不到index.js文件。
要改为<script type="text/javascript" src="index.js"></script> 就足以了。
但是假诺这样在web端开采的时候就能加载不到js和css文件,一种减轻措施是,添Gavin书夹的时候,选用Create folder references,如下图:

二个是 Create groups for any added folders (创立设想结构-包结构)一个是 Create folder references for any added folders


iOS 开采一时候大家会用UIWebView加载本地html,js,css 文件,加载的法子:
NSString *filePath = [[NSBundle mainBundle]pathForResource:@"index" ofType:@"html"];
NSString *htmlString = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
[webView loadHTMLString:htmlString baseURL:[NSURL URLWithString:filePath]];

将css,html,js 所在的公文夹拖入项目标时候会有三种情景

SmallSmiley

图片 2

率先种是相对路线 文件夹拖入为香艳NSUEscortL*fileURL = [[NSBundle mainBundle] URLForResource:@"index.html"withExtension:nil];本地html中加载图片,js,css财富也应当运用相对路线就行了如 <script type="text/javascript" src="index.js"></script>

import <UIKit/UIKit.h>

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

相应的.m文件:

图片 3

image

添加后:

二.加载本地HTML文件
将html文件及相关能源足够到品种中

20150803161221012.png

图片 4

另一种缓和方法是把全部www的文件夹copy到Document文件上边,那样就不会有这种难题,

三.关于baseURL
loadHTMLString:baseURL:措施的第一个参数是baseUHavalL,baseU君越L即HTML字符串中援用到能源的检索路线,没有引用外界能源时,可以直接传nil;若引用了表面能源,一般意况下利用mainBundle的路径即可,即
NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];

文本夹是金色的,并非风骚,这种情状下index.html的门径无法透过[[NSBundle mainBundle]pathForResource:@"index" ofType:@"html"]; 获取到,需求手动拼接路线,如下:

<p>this is external image.</p>

图片 5

////////

20150803182250663.png

图片 6

20150803182417391.png

图片 7

图片 8

localhtml

image

在HTML页面加载落成后,大家能够使用UIWebView的stringByEvaluatingJavaScriptFromString:主意试行JavaScript语句。如下:

图片 9

HTML中会呈现3张图纸,第一张是html从本地读取的图片,第二张是因此CSS从地点读取的图纸,第三张是通过绝对地址从表面读取的图形。index.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;}

图片 10

images1和images11目录实际是不设有的,上边代码重回的不二等秘书诀都以nil
NSString* images1Dir = [[NSBundle mainBundle] pathForResource:@"images1"ofType:nil];NSString* images11Dir = [[NSBundle mainBundle] pathForResource:@"images11"ofType:nil];

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

再有一种比较特殊的目录是以.bundle为后缀的目录,将其插足到项目是无论选取的是哪个选项,其都会保持其目录结构。

</body></html>

图片 11

index.js文件内容为:
function rewrite(){ document.write("This text was written by an external script!")}

image

addfolder

CopyBundleResources

暗许情形下为第一种,即具有加入到项指标公文都会在mainBundle根路径下,即无论是投入项目标文件的目录结构怎样,在应用程式中都能够经过mainBundlePath/filename来访谈到;假设运用第三种艺术,则就能保留相对路线,必要经过mainBundle帕特h/path/filename来访问。通过那二种情势到项目标文件夹呈现全数差别的颜色,如下

图片 12

亟待小心的是,把js文件参与到品种时会私下认可将其看作须要编写翻译的代码,必要在TACR-VGETS->Build Phases中的”Compile Sources”中找到该js文件,并将其移到下面的Copy Bundle Resources中。

图片 13

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"];

图片 14

Smiley.png

addfoldersmode

图片 15

进行js代码后,页面呈现就改成了

image

iOS和Android都提供了有关webview和javascript通讯的法力,那就使开荒者依据手提式无线电话机的体系来得适合手提式无线电话机的分界面,是分界面开采特别简明。
本人的原型首要达成通过UIWebView体现本土的html、css、javascript文件,何况和ios相互通信,用来呈现数据。
上面是自身完成的一个简单易行demo,分界面效果如下:

jsresult

点击连接调用ios中的提示成效:

那是因为,Xcode项目中的文件路线都以编造的,在应用程式中其实不设有,即在APP中,大致具备的文本都得以从mainBundle根目录下直接访谈,当然,例外总是存在的。
在将文件/文件夹参加到品种时,有那般多个选项“Create Folder References for any added folders”和“Recursively create groups for any added folders”。

Smiley

index.js再有援引到了七个地点图片文件:SmallSmiley.png

<p>this is local image from CSS.</p> <div id="myimage"> </div>

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" />

<input id="field_2" type="text" name="value" />

<input id="field_3" type="text" name="value" />

</form> </body> </html>

充裕相应的css文件:

body { background-color: #F2F5A9; }

增添相应的js文件:

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

运行,点击连接应该不出相应的对话框,表明相应的javascript未有奏效。修章是展开targets,点击ipad.web1,移动相应的test.js文件到下图就可以。

图片 16

image

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

加载后的显得效果如下,本地图片,CSS加载的地面图片,以及外界图片都足以健康展现。

filebundle

2.次之种艺术,使用loadHTMLString:baseURL:加载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];

对子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"];

然后在代码中得以用二种格局加载。1.首先种方法,使用loadRequest:主意加载当麻芋果件NSURLRequest
NSString* path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];NSURL* url = [NSURL fileURLWithPath:path];NSURLRequest* request = [NSURLRequest requestWithURL:url] ;[webView loadRequest:request];

图片 17

localhtmlresult

对于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"];


图片 18

本文由时时app平台注册网站发布于编程知识,转载请注明出处:关于iOS开拓加载本地html 图片等能源路径难点

关键词: