load a local css file into a webview

Question

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);

Mehul Patel · Accepted Answer · 2016-05-31 13:16:31Z

2

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.

enter image description here

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.

edited May 31, 2016 at 13:16

answered Feb 27, 2015 at 10:07

Mehul Patel

23.1k21 gold badges99 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kepa Santos Over a year ago

I tried what you mention, but still not added styles. I modified my question with the new code.

Mehul Patel Over a year ago

@KepaSantos: Please provide your comments in english.

Mehul Patel Over a year ago

I think notif.html file also contains href: tag for JS or CSS. So that these files not able to load on runtime. Please check notif.html also.

Kepa Santos Over a year ago

I check and only has href: to images that are in urls.

Gil Sand Over a year ago

You never use "HTML_HEADER" in your code, is that normal?

|

itzprintz · Accepted Answer · 2015-02-27 10:30:45Z

1

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] )

edited Feb 27, 2015 at 10:30

answered Feb 27, 2015 at 10:25

itzprintz

1261 silver badge5 bronze badges

3 Comments

Kepa Santos Over a year ago

But the style.css file is in my local. The one that i downloading is the html file.

itzprintz Over a year ago

Oh, so you want to prioritize your CSS over the one in HTML? I guess CSS directly in HTML file has higher priority than imported one so you would have to somehow remove css code from downloaded html. Regex could be the way

Kepa Santos Over a year ago

No, the html that I downloading is a <DIV> block and i need to embed into a html with some common styles.

Kepa Santos · Accepted Answer · 2015-02-27 13:21:50Z

1

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

edited Feb 27, 2015 at 13:21

answered Feb 27, 2015 at 13:04

Kepa Santos

5577 silver badges21 bronze badges

1 Comment

Viet Nguyen Over a year ago

I do same like you but it isn't work, uiwebview load local HTML and fine but styles in css are not append to HTML, can you point me how to fix that?

Collectives™ on Stack Overflow

load a local css file into a webview

3 Answers 3

6 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related