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

Answer 1

Your solution won't work because

1. your cssNode.href should be a URL (i.e. escaped and prefixed with file://), not a path
2. 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];