Load .CSS file from within app in uiwebview

Question

i am trying to load .js and .css files from within app resources to uiwebview. and i am able to load .js file but can not load .css file please help. here is my code

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    //NSString *cssFile = @"styling.css";

    NSString *jsFile = @"storage.js";
    NSString *jsFilePath = [[NSBundle mainBundle] pathForResource:jsFile ofType:nil];
    NSURL *jsURL = [NSURL fileURLWithPath:jsFilePath];
    NSString *javascriptCode = [NSString stringWithContentsOfFile:jsURL.path encoding:NSUTF8StringEncoding error:nil];
    [webView stringByEvaluatingJavaScriptFromString:javascriptCode];
}

this code it working perfectly for .js file but how can i use .css file in it?

Well... Add an error and tell us, what it says! NSError *e; [NSString stringWithContentsOfFile:jsURL.path encoding:NSUTF8StringEncoding error:&e]; if (e) { NSLog(@"%@", e); } — Julian F. Weinert
– Julian F. Weinert, Commented Apr 19, 2018 at 12:49
there is no error for now with js file it is working perfectly but i need to know how can i include css file. — Vix Hunk
– Vix Hunk, Commented Apr 19, 2018 at 13:06
@VixHunk Did you check this post stackoverflow.com/questions/33123093/…? — trungduc
– trungduc, Commented Apr 19, 2018 at 14:49
You could try this solution https://stackoverflow.com/questions/33123093/insert-css-into-loaded-html-in-uiwebview-wkwebview — Solomiya
– Solomiya, Commented Apr 19, 2018 at 15:02
@Solomiya tried this one but not working. my .php file is remotely loading in webview. and js n css files in bundle. — Vix Hunk
– Vix Hunk, Commented Apr 20, 2018 at 10:28

wottle · Accepted Answer · 2018-04-26 12:11:01Z

2

+50

You are basically on the right track, but you should be able to add the css using the same stringByEvaluatingJavaScriptString method.

- (void)webViewDidFinishLoad:(UIWebView *)webView {


    NSString *jsFile = @"storage.js";
    NSString *jsFilePath = [[NSBundle mainBundle] pathForResource:jsFile ofType:nil];
    NSURL *jsURL = [NSURL fileURLWithPath:jsFilePath];
    NSString *javascriptCode = [NSString stringWithContentsOfFile:jsURL.path encoding:NSUTF8StringEncoding error:nil];
    [webView stringByEvaluatingJavaScriptFromString:javascriptCode];

    // Updated to load css from "styling.css" file. 
    NSString *cssFile = @"styling.css";
    NSString *cssFilePath = [[NSBundle mainBundle] pathForResource:jsFile ofType:nil];
    NSURL *cssURL = [NSURL fileURLWithPath:jsFilePath];
    NSString *cssString = [NSString stringWithContentsOfFile:jsURL.path encoding:NSUTF8StringEncoding error:nil];

    // NSString *cssString = @"body { font-family: Verdana, Geneva, sans-serif; font-size: 50px; color: #F00; }";

    NSString *javascriptString = @"var style = document.createElement('style'); style.innerHTML = '%@'; document.head.appendChild(style)"; 
    NSString *javascriptWithCSSString = [NSString stringWithFormat:javascriptString, cssString];
    [webView stringByEvaluatingJavaScriptFromString:javascriptWithCSSString]; 

}

Once you do this, you can verify that the style is applied by using Safari remote debugging to view the source for the page displayed on the device / simulator. It can show you if some existing CSS is overriding yours.

edited Apr 26, 2018 at 12:11

answered Apr 25, 2018 at 15:20

wottle

13.7k4 gold badges30 silver badges72 bronze badges

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

2 Comments

Vix Hunk Over a year ago

your code worked perfectly but yeah you are right. but how can i do this "cssString" with my styling.css. how can i pass that file coding inside this cssString

wottle Over a year ago

I updated the response to load the css from a file named styling.css. If it no longer works, either the file is not included in your target, the file name is not right, or there are errors in the css that are causing it not to be valid (most likely).

Ganpat · Accepted Answer · 2018-04-20 05:41:55Z

2

NSString *HTML_HEADER=@"<HTML><HEAD><link rel='stylesheet' href='#FILE1#' type='text/css'></HEAD><BODY>";
NSString *HTML_FOOTER=@"</BODY></HTML>";

NSString *cssFilePath = [[NSBundle mainBundle] pathForResource:@"style" ofType:@"css"];
NSString *html_header_with_files = [HTML_HEADER stringByReplacingOccurrencesOfString:@"#FILE1#" withString:cssFilePath];

NSString *htmlString = [NSString stringWithFormat:@"%@%@%@",html_header_with_files,yourHtmlFile.html,HTML_FOOTER];

NSLog(@"htmlString %@", htmlString);
// Load HTML
[self.webView loadHTMLString:htmlString baseURL:nil];

Note: Add your all CSS/JS/HTML files to Project Properties >> Build Phases >> Copy Bundle Resources.

answered Apr 20, 2018 at 5:41

Ganpat

8833 gold badges17 silver badges34 bronze badges

7 Comments

Vix Hunk Over a year ago

my html is not in bundle it will load remotely from a url

Ganpat Over a year ago

Simply load your html content from URL to string variable. And replace the below line in above code. NSString *htmlString = [NSString stringWithFormat:@"%@%@%@",html_header_with_files,yourHtmlContent,HTML_FOOTER];

Vix Hunk Over a year ago

what is yourHtmlContent?

Vix Hunk Over a year ago

and please also tell me where should i put this code?

Ganpat Over a year ago

yourHtmlContent is complete HTML source code in NSString variable. You can put the above code in ViewDidLoad. Last line of code will load your HTML content in webView.

|

Mansi · Accepted Answer · 2018-04-24 10:30:41Z

I have written on how to add .css file in Xcode and load any HTML String along with applying the local css, in a wkwebview

https://medium.com/if-let-swift-programming/css-in-your-xcode-project-2b7011a29cb3

Do check if any of this helps.

Creating a .css file

⏩ Open Text Edit (Ensure you have ‘Make Plain Text’ selected under Format, or you might keep wondering how to save with .css extension)

⏩ Scribble down your css code that you would want to apply on your web view’s HTML string (In my case I wanted 2 types of fonts, some custom properties on links and an image instead of a bullet item, so below is what my css file looks like)

@font-face
{
 font-family: 'Gotham-Book';
 src: local('Gotham-Book'),url('Gotham-Book.otf') format('opentype');
}
@font-face
{
 font-family: 'Gotham-Medium';
 src: local('Gotham-Medium'),url('Gotham-Medium.otf')    format('opentype');
}
a {
 color: #16A4FA;
 text-decoration: none;
}
li {
 margin: 0 0 0 -30px;
 padding: 10px 0 10px 40px;
 list-style: none;
 background-image: url('myImage.png');
 background-repeat: no-repeat;
 background-position: left top 8px;
 background-size: 30px;
}

Here, Note that if you want some images to be loaded in your web view you will have to add them as a resource file in your project (It won’t load from your Assets.xcassets)

Add .css in xcworkspace It’s as easy as adding some resource file

⏩ Add your file by dragging it to your desired location, and copy items if needed

⏩ Ensure your file is present in the Build Phases > Copy Bundle Resources list

Loading HTML string in your web view

import WebKit

extension WKWebView {

    func loadHTML(fromString: String, colorHEX: String = "#757575", fontFamily: String = "Gotham-Book", fontSize: String = "14") {
        let htmlString = """
        <link rel="stylesheet" type="text/css" href="myCSSFile.css">
        <span style="font-family: '\(fontFamily)'; font-weight: normal; font-size: \(fontSize); color: \(colorHEX)">\(fromString)</span>
        """
        self.loadHTMLString(htmlString, baseURL: Bundle.main.bundleURL)
    }
}

Calling

/// webView is a WKWebView.
webView.loadHTML(fromString: "yourHTMLStringGoesHere")

chaunv · Accepted Answer · 2018-04-25 01:46:01Z

0

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    // Load file .js
    NSString *jsFile = @"storage.js";
    NSString *jsFilePath = [[NSBundle mainBundle] pathForResource:jsFile ofType:nil];
    NSURL *jsURL = [NSURL fileURLWithPath:jsFilePath];
    NSString *javascriptCode = [NSString stringWithContentsOfFile:jsURL.path encoding:NSUTF8StringEncoding error:nil];
    [webView stringByEvaluatingJavaScriptFromString:javascriptCode];
    // Load file .css
    NSString *cssFile = @"styling.css";
    NSString *cssFilePath = [[NSBundle mainBundle] pathForResource:cssFile ofType:nil];
    NSURL *cssURL = [NSURL fileURLWithPath:cssFilePath];
    NSString *cssCode = [NSString stringWithContentsOfFile:cssURL.path encoding:NSUTF8StringEncoding error:nil];
    NSString *jsAddCssString = @"var style = document.createElement('style'); style.innerHTML = '%@'; document.head.appendChild(style)";
    NSString *jsWithCssString = [NSString stringWithFormat:jsAddCssString, cssCode];
    [webView stringByEvaluatingJavaScriptFromString:jsWithCssString];
}

You can try it.

answered Apr 25, 2018 at 1:46

chaunv

8436 silver badges15 bronze badges

3 Comments

Vix Hunk Over a year ago

with this code it is getting .js but not css file please also review my .css file " body { font-family: Verdana, Geneva, sans-serif; font-size: 50px; color: #F00; }"

chaunv Over a year ago

your file css is OK. You try to comment source code "Load file .js", only run source code "Load file .css", and see file .css is load OK or NOT? Please tell me result after run ?

chaunv Over a year ago

Oh, you try to assign direct code css into NSString variable: NSString * cssCode = @"body { font-family: Verdana, Geneva, sans-serif; font-size: 50px; color: #F00}";. Run app again and see result. (better still comment code load file js).

Collectives™ on Stack Overflow

Load .CSS file from within app in uiwebview

4 Answers 4

2 Comments

7 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

7 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related