CODEWITHSUNDEEP
htmlioscsswebview
Kepa Santos
Kepa Santos

Reputation: 557

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

Upvotes: 1

Views: 4294

Answers (3)

Mehul Patel
Mehul Patel

Reputation: 23053

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.

Upvotes: 2

Kepa Santos
Kepa Santos

Reputation: 557

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

Upvotes: 1

itzprintz
itzprintz

Reputation: 126

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

Upvotes: 1

Related Questions