UIWebView CSS injection using JavaScript

I’m trying to inject a local css file into an UIWebView that finished loading website such as google etc.

I’m trying with JavaScript but with no success.

  • How to disable “Relative to margin” option for newly created constraint in Xcode6
  • Option value are not getting assigned to an variable correctly
  • What is required to develop iPhone games?
  • Objective C: Send email without leaving app
  • UISplitViewController Master / Detail communication
  • Certificate has either expired or has been revoked
  • 
    - (void)webViewDidFinishLoad:(UIWebView *)webView {
        NSString *cssPath = [[NSString alloc] initWithString:[[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"styles.css"]];
        NSURL *baseURL = [NSURL fileURLWithPath:cssPath];
    
        NSString *js = [NSString stringWithFormat:@"var fileref = document.createElement('link');
                        fileref.setAttribute('rel', 'stylesheet');
                        fileref.setAttribute('type', 'text/css');
                        fileref.setAttribute('href', %@);", baseURL];
    
        [webView stringByEvaluatingJavaScriptFromString:js];
    }
    

    Thanks,

    3 Solutions Collect From Internet About “UIWebView CSS injection using JavaScript”

    To inject javascript into a web view you must explicitly write in the html.

    An example of this is here where I wrote in a javascript scrollTo function:

    - (void)webViewDidFinishLoad:(UIWebView *)webView {
     [webView stringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script');"  
     "script.type = 'text/javascript';"  
     "script.text = \"function myFunction() { "  
     "window.scrollTo(100,100)"
     "}\";"  
     "document.getElementsByTagName('head')[0].appendChild(script);"];  
    
     [webView stringByEvaluatingJavaScriptFromString:@"myFunction();"];}
    

    This code writes the entire script tags and the myFunction into the head of the HTML

    I had a similar need. I have local html files in the bundle that I wanted to change css attributes programatically. Since you can not change files in the bundle, I wanted to inject my css at load time from variables in the app.

    The code below demonstrates the technique, just substitute your method for getting the css, i.e. read from a file, plist, code, or db.

    - (void)webViewDidFinishLoad:(UIWebView *)webView
    {
        NSString* css = @"\"@font-face { font-family: 'Chalkboard'; src: local('ChalkboardSE-Regular'); } body { background-color: #F0F0FC; color: #572B00; font-family: Chalkboard;} a { color: #A00; text-decoration: none;}\"";
        NSString* js = [NSString stringWithFormat:
                    @"var styleNode = document.createElement('style');\n"
                     "styleNode.type = \"text/css\";\n"
                     "var styleText = document.createTextNode('%@');\n"
                     "styleNode.appendChild(styleText);\n"
                     "document.getElementsByTagName('head')[0].appendChild(styleNode);\n",css];
        NSLog(@"js:\n%@",js);
        [self.webView stringByEvaluatingJavaScriptFromString:js];
    }
    

    I would suggest you to create a js file and add to your project file.

    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"js"];
    
    NSData *fileData = [NSData dataWithContentsOfFile:filePath]; 
    
    NSString *jsString = [[NSString alloc] initWithData:fileData encoding:NSUTF8StringEncoding];
    

    and you know how to call js in html file. this is the simplest and clean way to do it.