How to display HTML code in UIWebView? - html

I have HTML code that I get from a web service - it has style tags,(CSS I think) images and that sort of thing. I want to display it in a web view and have the remote images load as well as all the styling.
I've tried to set it like this:
[self.webView setBackgroundColor:[UIColor clearColor]];
NSMutableString *myString = [NSMutableString stringWithString:self.itemDecription];
[myString replaceOccurrencesOfString:#">" withString:#">" options:NSLiteralSearch range:NSMakeRange(0, [myString length])];
[myString replaceOccurrencesOfString:#"<" withString:#"<" options:NSLiteralSearch range:NSMakeRange(0, [myString length])];
[self.webView loadHTMLString:myString baseURL:nil];
However the web view just shows text without any styling and images don't load.

Try this one:
NSString *myFile = [[NSBundle mainBundle] pathForResource:#"tag" ofType:#"html"];
NSString* myString = [NSString stringWithContentsOfFile:myFile encoding:NSUTF8StringEncoding error:nil];
[webView loadHTMLString:myString baseURL:nil];

Related

local html in UIWebView with images from Assets catalog

I'm trying to write code that loads a local html string into a UIWebView with images from the Assets.xcassets catalog.
Currently, I load the images from the main bundle, like this:
NSString *htmlString = [NSString stringWithFormat:#"<h1>My title</h1><img src='%#'/>", #"myImage1.png"];
[self.webView loadHTMLString:htmlString baseURL:[[NSBundle mainBundle] bundleURL]];
However, this is very limiting in respect to using different retina versions of the images (#2 and #3).
I would like to load the images instead from the asset catalog, but can't figure out how to do it.
Provided the image name in the html string, how do I load the image from the assests into the webView, while supporting #2 and #3 retina versions?
Here Is Given Code Try it..
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
[webView loadHTMLString:htmlString baseURL:baseURL];
==> like thi some images :
=================================================================
This is how to load/use a local html with relative references.
Use the below given code.
NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle]
pathForResource:#"index" ofType:#"html" inDirectory:#"www"]];
[webview loadRequest:[NSURLRequest requestWithURL:url]];
Now all your relative links(like img/.gif, js/.js) in the html should get resolved.

Load html file from a framework is this possible?

Hi I want to load html and .js file from my project. These are the below steps i am following to load html file through framework but i am not able to hit html files.
Steps followed.
Created a framework which has webview as subview in it.
Created Resource.bundle and added all my html,.js files and images in the bundle.
When i add this framework into my project and try to access the image from the bundle i am not able to.
when i try to hit the html file i am not able to laod the html file in my webview.
NSString *bundlePath = [[NSBundle mainBundle] pathForResource:#"Resource" ofType:#"bundle"];
NSString *htmlFile = [[NSBundle bundleWithPath:bundlePath] pathForResource:#"simple" ofType:#"html"];
NSString* htmlString = [NSString stringWithContentsOfFile:htmlFile encoding:NSUTF8StringEncoding error:nil];
NSURL *url=[[NSBundle mainBundle] bundleURL];
[webview loadHTMLString:htmlString baseURL:url];
[self addSubview:webview];
Can anyone tell me why this wont work and is this the right approach to follow?
I create a bundle with index.html that call a js with a simple alert, with this code i'm able to se the alert
NSString *bundlePath = [[NSBundle mainBundle] pathForResource:#"BundleName" ofType:#"bundle"];
NSString *htmlFile = [[NSBundle bundleWithPath:bundlePath] pathForResource:#"index" ofType:#"html"];
NSString* htmlString = [NSString stringWithContentsOfFile:htmlFile encoding:NSUTF8StringEncoding error:nil];
[_web loadHTMLString:htmlString baseURL:[[NSBundle mainBundle] bundleURL]];
the html work in local? the webview is initialized?

load a local css file into a webview

I built a simple ios app that loads a html downloaded from a server into a webview.
[self.webView loadHTMLString:notif.html baseURL:nil];
This works perfect. The problem is that i nedd to apply a local css file to the webview and I dont know how to do it.
I tried doing it this way, but the styles are not being applied.
NSString *HTML_HEADER=#"<HTML><HEAD><link rel='stylesheet' href='style.css' type='text/css'></HEAD><BODY>";
NSString *HTML_FOOTER=#"</BODY></HTML>";
NSString *htmlString = [NSString stringWithFormat:#"%#%#%#",HTML_HEADER,notif.html,HTML_FOOTER];
NSLog(#"htmlString %#", htmlString);
[self.webView loadHTMLString:htmlString baseURL:nil];
Any idea?
Thanks
UPDATE:
I tried to do the following:
NSString *HTML_HEADER=#"<HTML><HEAD><link rel='stylesheet' href='#FILE1#' type='text/css'></HEAD><BODY>";
NSString *HTML_FOOTER=#"</BODY></HTML>";
NSString *cssFilePath = [[NSBundle mainBundle] pathForResource:#"style" ofType:#"css"];
NSString *html_header_with_files = [HTML_HEADER stringByReplacingOccurrencesOfString:#"#FILE1#" withString:cssFilePath];
NSString *htmlString = [NSString stringWithFormat:#"%#%#%#",html_header_with_files,notif.html,HTML_FOOTER];
NSLog(#"htmlString %#", htmlString);
[self.webView loadHTMLString:htmlString baseURL:nil];
And in Build Phases i have added the style.css
UPDATE 2:
I also check if the style.css exists with
NSString* filePath = [[NSBundle mainBundle] pathForResource:#"style" ofType:#"css"];
NSLog(#"\n\nthe string %#",filePath);
The reason is CSS and JS files not available at runtime for render in HTML.
You need to take care of some points:
All CSS/JS/HTML files must be added to Project Properties >> Build Phases >> Copy Bundle Resources.
Check that all files are added if not then manually add those files.
All files are should be placed in the same folder, so that reference file path will be available at run time.
Instead of using directly file names, I will prefer you to use marker. Use symbols as a marker to replace with actual path of CSS and JS files.
For example:
NSString *HTML_HEADER=#"<HTML><HEAD><link rel='stylesheet' href='#FILE1#' type='text/css'></HEAD><BODY>";
NSString *HTML_FOOTER=#"</BODY></HTML>";
NSString *cssFilePath = [[NSBundle mainBundle] pathForResource:#"style" ofType:#"css"];
NSString *html_header_with_files = [HTML_HEADER stringByReplacingOccurrencesOfString:#"#FILE1#" withString:cssFilePath];
NSString *htmlString = [NSString stringWithFormat:#"%#%#%#",html_header_with_files,notif.html,HTML_FOOTER];
NSLog(#"htmlString %#", htmlString);
[self.webView loadHTMLString:htmlString baseURL:nil];
In above example I have replace style.css string from html part and add marker #FILE1#.
This marker is relative url to file style.css and it will be replace before html load in webView.
So whenever you would like to load html to webView, load all resource files from their relatives urls.
Here HTML_HEADER will be replace with actual path for all resources files.
You can import files (as CSS, JS ...) even without putting them into "Copy bundle resources", so you can just download CSS and use it during run of your app.
Trick is in setting "baseURL" parameter, which becomes root directory for your UIWebView.
// HTML file
NSString *htmlFile = [[NSBundle mainBundle] pathForResource:htmlFileName ofType:#"html"];
NSString* htmlString = [NSString stringWithContentsOfFile:htmlFile encoding:NSUTF8StringEncoding error:nil];
// root directory
NSURL *rootDir = [[NSBundle mainBundle] bundleURL];
[self.webView loadHTMLString:htmlString baseURL:rootDir];
Then, when you say
<link rel="stylesheet" type="text/css" href="style.css">
in your HTML file, app will look for style.css in rootDir directory (in this case, [[NSBundle mainBundle] bundleURL] )
I finally find the solution.
NSString *HTML_HEADER=#"<HTML><HEAD><link rel='stylesheet' href='#FILE1#' type='text/css'></HEAD><BODY>";
NSString *HTML_FOOTER=#"</BODY></HTML>";
NSString *cssFilePath = [[NSBundle mainBundle] pathForResource:#"style" ofType:#"css"];
NSString *html_header_with_files = [HTML_HEADER stringByReplacingOccurrencesOfString:#"#FILE1#" withString:cssFilePath];
NSString *htmlString = [NSString stringWithFormat:#"%#%#%#",html_header_with_files,notif.html,HTML_FOOTER];
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
NSLog(#"htmlString %#", htmlString);
[self.webView loadHTMLString:htmlString baseURL:baseURL];
Its necessary to specify the bundlePath in loadHTMLString:
The solution is a combination of the two answers given by #Kampai and #itzprintz

Converting html to the string

i am working with webview in my iphone and i want to pass the data in the form of html using the tags, so that i can add the text in the bold and italic and even the pictures in the form of string. So kindly help me out regarding this . Any help will be much appritiable.
Try this:
UIWebView *webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 205, 320, 150)];
NSString *filePath = [[NSBundle mainBundle] pathForResource:#"ImageName" ofType:#"png"];
NSString *htmlString = [NSString stringWithFormat:#"<html><body><b style='color:black'>Deleting your account will:<div style='margin-left:220px; margin-top:-27px'><img src='%#'></div></b><ul style='margin-left:-20px; margin-top:-1px; color:gray; font:Arial; font-size:12x'><li> write some line</li><li> write your line</li><li>write your line</li></ul></body></html>", filePath];
// you can modified html string as per your need..
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseUrl = [NSURL fileURLWithPath: path];
[webView loadHTMLString:htmlString baseURL:baseUrl];

iOS - Showing App version in HTML page

I'm showing About in form of html in my iOS application. About.html is also bundled along with the application.
I want to show the application version in About html page automatically so that I dont have to edit the HTML manually everytime I bump the version.
Currently what I'm doing is as below:
I'm creating the html as <b>Version %#</b>
In Objective C code, I'm writing it as
NSString* aboutFilePath = [[NSBundle mainBundle] pathForResource:#"About" ofType:#"html"];
NSString* htmlStr = [NSString alloc] initWithContentsOfFile:aboutFilePath encoding:NSUTF8StringEncoding error:nil];
NSString* formattedStr = [NSString stringWithFormat:htmlStr, [self appNameAndVersionNumberDisplayString];
[self.webView loadHTMLString:formattedStr baseURL:nil];
- (NSString *)appNameAndVersionNumberDisplayString {
NSDictionary *infoDictionary = [[NSBundle mainBundle] infoDictionary];
NSString *appDisplayName = [infoDictionary objectForKey:#"CFBundleDisplayName"];
NSString *majorVersion = [infoDictionary objectForKey:#"CFBundleShortVersionString"];
NSString *minorVersion = [infoDictionary objectForKey:#"CFBundleVersion"];
return [NSString stringWithFormat:#"%#, Version %# (%#)",
appDisplayName, majorVersion, minorVersion];
}
Is it good way to do it or is there any better way to achieve it?
You are doing it in near to perfect manner. There is no problem in proceeding with your approach.
That's ok. If you want to localise the text in the future then that might change the order of the parameters in the text so using something more like SUB_VERSION as the identifier to be replaced and then using the string replacement methods (instead of format method) would be better.