Kepa Santos Kepa Santos - 6 months ago 20
CSS Question

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

enter image description here

UPDATE 2:

I also check if the style.css exists with

NSString* filePath = [[NSBundle mainBundle] pathForResource:@"style" ofType:@"css"];
NSLog(@"\n\nthe string %@",filePath);

Answer

The reason is CSS and JS files not available at runtime for render in HTML.

You need to take care of some points:

  1. 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.

enter image description here

  1. All files are should be placed in the same folder, so that reference file path will be available at run time.

  2. 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.