Injecting a local css into UIWebView

Question

I'm trying to "inject" a local css file into downloaded xhtml file.

I found many examples of how to do it, but it just doesn't work for me...

Here is my code:

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString *path = [[NSBundle mainBundle] bundlePath];
    NSString *cssPath = [path stringByAppendingPathComponent:@"test.css"]; 

    NSString *js = [NSString stringWithFormat:@"var cssNode = document.createElement('link');"
                "cssNode.type = 'text/css';"
                "cssNode.rel = 'stylesheet';"
                "cssNode.href = '%@';", cssPath];
    js = [NSString stringWithFormat:@"%@document.getElementsByTagName('head')[0].appendChild(cssNode);", js];
    //m_webview is a member 
    [m_webView stringByEvaluatingJavaScriptFromString:js];
}

What am I doing wrong here?

Thanks,

Answer 1

I also had trouble doing this.

I was trying to load an HTML file from a server and change the styling using a local CSS file.

At first I used

[webView loadRequest:reqObj];

And when it hit - (void)webViewDidFinishLoad:(UIWebView *)webView i was trying to push the CSS file as a child to 'head':

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
NSString *path = [[NSBundle mainBundle] bundlePath];
NSString *cssPath = [path stringByAppendingPathComponent:@"style.css"]; 

NSString *js = [NSString stringWithFormat:@"var cssChild = document.createElement('link');"
                "cssChild = 'text/css';"
                "cssChild = 'stylesheet';"
                "cssChild = '%@';", cssPath];
js = [NSString stringWithFormat:@"%@ document.getElementsByTagName('head')[0].appendChild(cssChild);", js];
[webView stringByEvaluatingJavaScriptFromString:js];
}

So... it didn't work...

then i tried

NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];    
[webView loadHTMLString:htmlString baseURL:baseURL];

(I copied the HTML string into htmlString) and then, inside - (void)webViewDidFinishLoad:(UIWebView *)webView I injected the CSS as in the code above. And it worked!

But... my HTML file is stored in a remote server and I didn't have the HTML string, so I used

NSString* myFile = [NSString stringWithFormat:@"http://blablabla.com/file.html"];
NSString* myFileURLString = [myFile stringByReplacingPercentEscapesUsingEncoding:NSASCIIStringEncoding];
NSData *myFileData = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:myFileURLString]];
NSString* myFileHtml = [[[NSString alloc] initWithData:myFileData encoding:NSASCIIStringEncoding] autorelease];

To get the HTML. Now, I have the raw HTML text inside ' myFileHtml '. I now use

NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];    
[webView loadHTMLString:myFileHtml baseURL:baseURL];

And catching the response in ' webViewDidFinishLoad ', injecting my CSS file into it and it worked :)

Maybe there's another, more elegant, solution to this problem, but this is what I came up with...

Hope it helped.