Injecting CSS into UIWebView using JavaScript

Question

I am attempting to inject a local CSS file to override the styling of a webpage. The webpage is presented in a UIWebView container in iOS. However I am not able to get my code to work. See the snippet of my delegate method below. This code runs (I can see the NSLog message) but I do not see the results of it's execution on the page.

I know it can't be the CSS I wrote because in this case I took the pages own CSS file and simply changed some colors. (In order to test this method)

-(void)webViewDidFinishLoad:(UIWebView *)webView 
{
    NSString *path = [[NSBundle mainBundle] bundlePath];
    NSString *cssPath = [path stringByAppendingPathComponent:@"reader.css"];
    NSString *js = [NSString stringWithFormat:@"var headID = document.getElementsByTagName('head')[0];var cssNode = document.createElement('link');cssNode.type = 'text/css';cssNode.rel = 'stylesheet';cssNode.href = '%@';cssNode.media = 'screen';headID.appendChild(cssNode);", cssPath];
    [webView stringByEvaluatingJavaScriptFromString:js];
    NSLog(@"webViewDidFinishLoad Executed");
}

joerick · Accepted Answer · 2012-01-09 23:20:39Z

9

Your solution won't work because

your cssNode.href should be a URL (i.e. escaped and prefixed with file://), not a path
Safari doesn't let you load local files from a remote page, as it's a security risk.

In the past I've done this by downloading the HTML using an NSURLConnection, and then adding a <style> tag in the HTML head. Something like:

NSString *pathToiOSCss = [[NSBundle mainBundle] pathForResource:@"reader" ofType:@"css"];
NSString *iOSCssData = [NSString stringWithContentsOfFile:pathToiOSCss encoding:NSUTF8StringEncoding error:NULL];
NSString *extraHeadTags = [NSString stringWithFormat:@"<style>%@</style></head>", iOSCssData];
html = [uneditedHtml stringByReplacingOccurrencesOfString:@"</head>" withString:extraHeadTags];

[webView loadHTMLString:html baseURL:url];

answered Jan 9, 2012 at 23:20

joerick

16.5k4 gold badges56 silver badges59 bronze badges

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

3 Comments

Daniel Klöck Over a year ago

this does not take into account the possibility of </HEAD>

Daniel Klöck Over a year ago

also, a html may not even have a head tag

Naman Vaishnav Over a year ago

can you please help me in how to Put icon inside input element . . .

Collectives™ on Stack Overflow

Injecting CSS into UIWebView using JavaScript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related