Insert CSS into loaded HTML in UIWebView / WKWebView

Question

I am successfully able to get HTML content and display into my UIWebView.

But want to customize the content by adding an external CSS file. I can only change the size of text and font. I tried every possible solution to make changes but it does not work - it shows no changes.

Below is my code

HTMLNode* body = [parser body];
HTMLNode* mainContentNode = [body  findChildWithAttribute:@"id" matchingName:@"main_content" allowPartial:NO];
NSString *pageContent = [NSString stringWithFormat:@"%@%@", cssString, contentHtml];
        [webView loadHTMLString:pageContent baseURL:[NSURL URLWithString:@"http://www.example.org"]];

-(void)webViewDidFinishLoad:(UIWebView *)webView1{
    int fontSize = 50;
    NSString *font = [[NSString alloc] initWithFormat:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '%d%%'", fontSize];
    NSString *fontString = [[NSString alloc] initWithFormat:@"document.getElementById('body').style.fontFamily=\"helvetica\""];

    [webView1 stringByEvaluatingJavaScriptFromString:fontString];
    [webView1 stringByEvaluatingJavaScriptFromString:font];
}

Please help me get the css stylesheet in my view.

joern · Accepted Answer · 2017-02-26 12:50:46Z

73

You can do it like this:

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSString *cssString = @"body { font-family: Helvetica; font-size: 50px }"; // 1
    NSString *javascriptString = @"var style = document.createElement('style'); style.innerHTML = '%@'; document.head.appendChild(style)"; // 2
    NSString *javascriptWithCSSString = [NSString stringWithFormat:javascriptString, cssString]; // 3
    [webView stringByEvaluatingJavaScriptFromString:javascriptWithCSSString]; // 4
}

What this code does:

// 1 : Define a string that contains all the CSS declarations

// 2 : Define a javascript string that creates a new <style> HTML DOM element and inserts the CSS declarations into it. Actually the inserting is done in the next step, right now there is only the %@ placeholder. I did this to prevent the line from becoming too long, but step 2 and 3 could be done together.

// 3 : Combine the 2 strings

// 4 : Execute the javascript in the UIWebView

For this to work, your HTML has to have a <head></head> element.

EDIT:

You can also load the css string from a local css file (named "styles.css" in this case). Just replace step //1 with the following:

NSString *path = [[NSBundle mainBundle] pathForResource:@"styles" ofType:@"css"];
NSString *cssString = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];

As another option you can just inject a <link> element to the <head> that loads the CSS file:

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSString *path = [[NSBundle mainBundle] pathForResource:@"styles" ofType:@"css"];
    NSString *javascriptString = @"var link = document.createElement('link'); link.href = '%@'; link.rel = 'stylesheet'; document.head.appendChild(link)";
    NSString *javascriptWithPathString = [NSString stringWithFormat:javascriptString, path];
    [webView stringByEvaluatingJavaScriptFromString:javascriptWithPathString];
}

This solution works best for large CSS files. Unfortunately it does not work with remote HTML files. You can only use this when you want to insert CSS into HTML that you have downloaded to your app.

UPDATE: WKWebView / Swift 3.x

When you are working with a WKWebView injecting a <link> element does not work because of WKWebView's security settings.

You can still inject the css as a string. Either create the CSS string in your code //1 or put it in a local file //2. Just be aware that with WKWebView you have to do the injection in WKNavigationDelegate's webView(_:didFinish:) method:

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    insertCSSString(into: webView) // 1
    // OR
    insertContentsOfCSSFile(into: webView) // 2
}

func insertCSSString(into webView: WKWebView) {
    let cssString = "body { font-size: 50px; color: #f00 }"
    let jsString = "var style = document.createElement('style'); style.innerHTML = '\(cssString)'; document.head.appendChild(style);"
    webView.evaluateJavaScript(jsString, completionHandler: nil)
}

func insertContentsOfCSSFile(into webView: WKWebView) {
    guard let path = Bundle.main.path(forResource: "styles", ofType: "css") else { return }
    let cssString = try! String(contentsOfFile: path).trimmingCharacters(in: .whitespacesAndNewlines)
    let jsString = "var style = document.createElement('style'); style.innerHTML = '\(cssString)'; document.head.appendChild(style);"
    webView.evaluateJavaScript(jsString, completionHandler: nil)
}

edited Feb 26, 2017 at 12:50

answered Oct 14, 2015 at 13:19

joern

27.7k7 gold badges94 silver badges107 bronze badges

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

34 Comments

cole Over a year ago

Sorry for my late reply :( Could you explain what this line means ? NSString *javascriptString = @"var style = document.createElement('style'); style.innerHTML = '%@'; document.head.appendChild(style)"; It does not work for me ..!

joern Over a year ago

@Mansuu.... Try putting the contents of the CSS file (as a String) into your HTML string. Don't forget to embed the CSS into a Style element <style type="text/css">YOUR CSS</style>

0xxxD Over a year ago

I think webView:didFinish:navigation: isn't the best inject time.

AechoLiu Over a year ago

It works. But I have to wrap cssString into single line. The multi-line by """ doesn't work.

Alain Stulz Over a year ago

Inserting <link> also works in WKWebView if you set wkWebView to use: wkWebView.loadHTMLString(html, baseURL: Bundle.main.resourceURL)

|

Amer Hukic · Accepted Answer · 2018-11-04 12:56:49Z

31

Since UIWebView is deprecated in iOS 12, I'll only answer for WKWebView. I've implemented CSS loading like it was described in the accepted answer. The problem was that sometimes the transition from HTML with no CSS applied to HTML with CSS was visible.
I think a better approach is to use the WKUserScript to inject the CSS like this:

lazy var webView: WKWebView = {
    guard let path = Bundle.main.path(forResource: "style", ofType: "css") else {
        return WKWebView()
    }

    let cssString = try! String(contentsOfFile: path).components(separatedBy: .newlines).joined()
    let source = """
      var style = document.createElement('style');
      style.innerHTML = '\(cssString)';
      document.head.appendChild(style);
    """

    let userScript = WKUserScript(source: source,
                                  injectionTime: .atDocumentEnd,
                                  forMainFrameOnly: true)

    let userContentController = WKUserContentController()
    userContentController.addUserScript(userScript)

    let configuration = WKWebViewConfiguration()
    configuration.userContentController = userContentController

    let webView = WKWebView(frame: .zero,
                            configuration: configuration)
    return webView
}()

You can read more about this approach in this blog post.

answered Nov 4, 2018 at 12:56

Amer Hukic

1,5241 gold badge19 silver badges30 bronze badges

6 Comments

iUser Over a year ago

I had the same issue. The transition was visible. It worked like charm. Thank you!!

AechoLiu Over a year ago

This works perfect. The result html doesn't blink when css injected.

Dick Thunder Over a year ago

This is a way to do it on iOS 12, I've been struggling with this for so long. Many thanx!

Tum Over a year ago

Excellent! Glad I found this comment. No glitches with this solution.

Vicente Garcia Over a year ago

Remember to set configuration.suppressesIncrementalRendering = true to avoid seen the transition while the page is still loading.

|

VIJAY SINGH RAGHAV · Accepted Answer · 2018-12-12 12:07:37Z

4

Instead of applying css with style tag it's better to apply it with the link tag:

func insertContentsOfCSSFile2(into webView: WKWebView) {
    guard let path = Bundle.main.path(forResource: "resource", ofType: "css") else { return }                
    let csFile = "var head = document.getElementsByTagName('head')[0];var link = document.createElement('link'); link.rel = 'stylesheet';link.type = 'text/css';link.href = '\(path)';link.media = 'all';head.appendChild(link);"

    webView.evaluateJavaScript(csFile) {(result, error) in
        if let error = error {
            print(error)
        }
    }
}

I have tested it. it is working fine.

answered Dec 12, 2018 at 12:07

VIJAY SINGH RAGHAV

1412 silver badges11 bronze badges

Comments

Chea Sambath · Accepted Answer · 2019-10-08 16:48:49Z

1

You need to add this header before apple style to HTML

let fontName = UIFont.systemFont(ofSize: 17.0).fontName
    let htmlContent = """
    <header>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'>
    </header>
    <style type='text/css'>
    img{max-height: 100%; min-height: 100%; height:auto; max-width: 100%; width:auto;margin-bottom:5px;}
    p{text-align:left|right|center; line-height: 180%; font-family: '\(fontName)'; font-size: 17px;}
    iframe{width:100%; height:250px;}
    </style> \(html)
    """
    webView.loadHTMLString(htmlContent, baseURL: Bundle.main.bundleURL)

answered Oct 8, 2019 at 16:48

Chea Sambath

1,3352 gold badges13 silver badges16 bronze badges

Comments

harun karaca · Accepted Answer · 2020-07-09 12:18:38Z

1

I tried Amer Hukic answer. But did not work just the way it is. I added below code between my html head tags.

<link rel="stylesheet" href="style.css">

answered Jul 9, 2020 at 12:18

harun karaca

1345 bronze badges

Comments

SuperGuyAbe · Accepted Answer · 2018-03-27 15:53:05Z

0

See @joern's accepted answer for more complete details. I'm adding this answer because I ran into a weird edge case. My particular use case needed to add styling to a div with a class="dialog". For some reason styling using .dialog and div weren't working though other types of styling were working. In the end I used the following to set the width of the dialog

let width = Int(webView.bounds.width)
let script = "document.getElementsByClassName(\"dialog\")[0].style.width = \"\(width)px\""
webView.evaluateJavaScript(script)

answered Mar 27, 2018 at 15:53

SuperGuyAbe

5351 gold badge5 silver badges5 bronze badges

Collectives™ on Stack Overflow

Insert CSS into loaded HTML in UIWebView / WKWebView

6 Answers 6

34 Comments

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

34 Comments

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related