background image in html page in iphone - iphone

I m the beginner in iphone development.
How i call the background image from my project directory in Xcode in html page. I have taken previously UISegment control and after that i calling two html page on webview in uisegmentcontroller.
Now i want to set background images on those html pages.
It is possible?
if it is yes then how?
thanks in advance..

You can specify a base URL when loading HTML in a UIWebView. If you set the base URL to your bundle path, you can simply reference the background image as if it was in the current directory.
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
[webView loadHTMLString:htmlPage baseURL:baseURL];
in your HTML:
body {
background: url(bg.jpg); // "bg.jpg" is in your bundle
}

Related

Loading a UIWebview with a local HTML file from a nested folder structure

Specifically, I have a folder structure that looks like the below:
about (main folder)
css (this sub-folder contains the css files)
img (this sub-folder contains the img files)
js (this sub-folder contains the js files)
page (this subfolder contains the index.html file)
If I click on the index.html file from a normal computer browser, everything works as expected.
However, I am trying to load this index.html into a UIWebView.
So far, what I've done is I dragged the "about" folder to XCode and copied it there as I would any other file. Then I tried the following code:
NSString *htmlFile = [[NSBundle mainBundle] pathForResource:#"index" ofType:#"html"];
NSData *htmlData = [NSData dataWithContentsOfFile:htmlFile];
NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] resourcePath]];
[webView loadData:htmlData MIMEType:#"text/html" textEncodingName:#"UTF-8" baseURL:baseURL];
The webview loads the index.html, however it doesnt load the images/css/js, as I presume it can't find them within the folder structure.
Any help would be appreciated! Thank you!
oops, I actually found the answer here: Load resources from relative path using local html in uiwebview
I was able to use the actual folder structure as is with the following code:
NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:#"index" ofType:#"html" inDirectory:#"/about/page"]];
[webView loadRequest:[NSURLRequest requestWithURL:url]];
Instead of using images/css/js use only sample.js.

Using Local Resource and Relative Link in the same UIWebView

I have a problem with a WebView. I'm loading an Html String into a web view. As base URL I need to use my site URL (because there are some relative link inside the html and I cannot modify it).
The problem is that I also need to use some images and css that are stored inside the Application bundle.
So I'm creating a reference to the local resource using this code (the result string is used as src in html file):
NSString *cssUrl = [NSString stringWithString:#"file:"];
cssUrl = [cssUrl stringByAppendingString:[[NSBundle mainBundle] resourcePath]];
cssUrl = [cssUrl stringByAppendingString:#"/story.css"];
Then I've also added:
cssUrl = [cssUrl stringByReplacingOccurrencesOfString:#"/" withString:#"//"];
cssUrl = [cssUrl stringByReplacingOccurrencesOfString:#" " withString:#"%20"];
Any idea how to solve the problem and how to create a reference to a file that can be used inside a web view?
Thanks
Francesco
First, import a directory, e.g. one called web, into your project where all the files reside. Make sure you select "Create Group References For Any Folders" when Xcode asks you.
Now you can load your initial string like this after putting it into a file inside web, say index.html:
NSString* path = [[NSBundle mainBundle] pathForResource:
#"index" ofType:#"html" inDirectory:#"web"];
if (path)
[self.webView loadRequest:
[NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]]];
Now all relative source URLs in your string will work as expected, including <img>, <a> etc.
How about this?
NSString *resourcePath = [[NSBundle mainBundle] pathForResource:#"story" ofType:#"css"];
NSURL *url = [NSURL fileURLWithPath:resourcePath];
NSString *theMagicalURLString = [url absoluteString];
It seems that what I was trying to do it's not possible. To use the bundled resource you have to set the base URL of your web view to the resource path.
Thanks to everyone for your help
Francesco

display local html file with css in iphone..?

I want to display local html file that has css too in UIWebView. I am able to do that using following code..
NSURL *baseUrl = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
NSString *path = [[NSBundle mainBundle] pathForResource:#"info" ofType:#"html"];
NSString *htmlString = [NSString stringWithContentsOfFile:path];
[webView loadHTMLString:htmlString baseURL:baseUrl];
I am not able to get hover effects and my understanding is my be there is no hover kind of thing in a touch mobile,
Any ways my main issue is I had deleted my index.html from resources and then re added the updated one but not getting the updated one..
I don't know what happen the web view still loads the old html file. I tried to clean project too.
Second thing can I get css effects in iphone..?
Thanks..
As far as I know you can only achieve this result by using javascript-events like ontouchstart (or something).
I believe if you reset your simulator (While running your simulator, go to iOS Simulator > Reset Content and Settings in the menu bar) then re-run your app, the UIWebView will load the new index.html. UIWebViews cache these things, so you can add code to clear that cache and/or ignore the cache. Check here: Clearing UIWebview cache

How do I include CSS resource in programmatically generated HTML for iPhone UIWebView?

I am programmatically generating HTML and want to link to a CSS file that I've included in my Resources folder. I am using a baseURL of nil, and my CSS file is at the top level of the project file, but this "link" is definitely not working (ie, the CSS file is clearly not being loaded/found when the UIWebView displays the HTML).
Is it possible to do this? Or will I need to put the CSS file on the web somewhere and link to it via a URL? (I can see the advantage of doing this -allowing the app to change its style without redistributing the app).
Thanks
Thanks everyone! Here's what I did, works great.
NSBundle *bundle = [NSBundle mainBundle];
NSURL *resourceBaseURL = [NSURL fileURLWithPath:[bundle bundlePath]];
[self.webView loadHTMLString:htmlString baseURL:resourceBaseURL];
Set the base URL to the bundle path:
NSBundle *bundle = [NSBundle mainBundle];
NSURL *baseURL = [NSURL fileURLWithPath:[bundle bundlePath]];

UIWebView display locally stored website (HTML, images, Javascript)

I've looked EVERYWHERE for this, can't find anything. I basically need to store an entire website inside of my iPhone for some interesting reasons. Regardless I can't figure out how to display it correctly in my UIWebView.
EDIT: I should clarify, I can load the original HTML file, and I have chagned all of the pathing to be local, except nothing gets linked in.
Here is the code
self.dataDetectorTypes = UIDataDetectorTypeLink;
NSString *path = [[NSBundle mainBundle] pathForResource:#"index" ofType:#"html"];
NSURL *url = [NSURL fileURLWithPath:path];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[self loadRequest:request];
index.html has a bunch of <script type="text/javascript" src="somescript.js">
None of the JS code gets executed
Looks like you're loading the HTML from inside your bundle. This means that all the additional files (.js, .css, and any media files) also need to be present in your bundle. So the first thing to check is to look inside the contents of your executable and make sure the js, etc. files are included.
If that looks fine the next thing to check is if the html, js, or css files reference content via relative or absolute URLs. If there's an absolute path reference in the web content then UIWebView is going to try to download that content each time so it'll only work when you have a net connection. If the path is relative then it's going to look in the bundle to see if such a file exists.
When you included the html and content into the XCode project file you probably dragged the file(s) over to the project side-bar and were asked whether to "Recursively create groups for any added folders" or to "Create Folder References for any added folders."
The default is the first one which means XCode creates a yellow folder in your project, but it'll ignore the directory hierarchy on disk when time comes to generate the output bundle. If you choose the second option then the folder is blue and if you look in your output bundle you'll see that the whole folder hierarchy has been replicated.
The first works for simple web pages where everything is at the same folder level and you can use the method you list above to load it. The second case works better if your web page is complex and references content in sub-folders in which case you need to load the web pages from a relative path (say, the 'webpages' folder):
NSString *path = [[NSBundle mainBundle]
pathForResource:#"index" ofType:#"html"
inDirectory:#"webpages"];
The last thing to check for is if there are any BASE tags in the html file. This is a way to specify a default address or target for all links on a page, but it can muck up webview links.
The problem is that this call:
NSURL *url = [NSURL fileURLWithPath:path];
doesn't setup a baseURL and so relative paths in the .html file for things like javascript, css, images etc don't work.
Instead use this:
url = [NSURL URLWithString: [path lastPathComponent]
relativeToURL: [NSURL fileURLWithPath: [path stringByDeletingLastPathComponent]
isDirectory: YES]];
and then things like "styles.css" in the index.html file will be found IFF they are copied into the bundle next to the .html file.
You need to set this:
myWebView.dataDetectorTypes = UIDataDetectorTypeLink
Make sure that the .js files are in your copy to resource bundle section and not in the compile section. Xcode places them in the compile group by default.
When adding pathFor resource in Dictionary , it displays a nil string error.
My attempt was to run an entire web page out of the Xcode project file. To do that you must:
When importing the file select "Create folder references for any added folders".
Set up the web view, but make sure you set the relative path as previously mentioned.
NSString *path = [[NSBundle mainBundle] pathForResource:#"filename"
ofType:#"html"
inDirectory:#"Directory"];
NSURL *url = [NSURL URLWithString:[path lastPathComponent] relativeToURL:
[NSURL fileURLWithPath: [path stringByDeletingLastPathComponent]
isDirectory:YES]];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[self.currentWebView loadRequest:request];